Mouse hover работает в режиме предварительного просмотра Dreamweaver, но не на моем веб-сайте.

Question

Я использую Dreamweaver для разработки веб-сайта.Я пытаюсь использовать CSS, чтобы получить следующий эффект.В общем, когда я наводю указатель мыши на изображение, я хочу, чтобы изображение потемнело и показывало какой-то текст.

Это отлично работает в режиме предварительного просмотра Dreamweaver, но не в режиме реального времени.мой размещенный сайт.На моем размещенном веб-сайте это показывает:

Mt HTML-код:

.col {
	border-radius: 50%;
	background-color: "#EAEAEA";
	float: left;
	margin-bottom: 5%;
	margin-top: 5%;
	position: relative;
}

.col:hover .responsive-image {
	transition: all 200ms ease-in-out;
	transform: scale(1.2);
	filter: brightness(20%);
}

.responsive-image {
	border-radius: 50%;
	width: 100%;
	height: 250px;
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	transition: all 200ms ease-in-out;
}


.text-on-image {
	opacity: 0;
	transition: .5s ease;
}


.col:hover .text-on-image {
	opacity: 1;
	transition: .5s ease;
}

.text-heading {
	color: white;
	font-size: 30px;
	font-weight: 100;
	letter-spacing: 0.1em;
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}

.text-desc {
	color: white;
	font-weight: 200;
	letter-spacing: 0.1em;
	font-size: 15px;
	position: absolute;
	top: 70%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	text-align: center;
	}

<div class="col col-lg">
			<img class="responsive-image" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="Yelish"/>
			<div class="text-on-image">
				<div class="text-heading">
					Yelish
				</div>
				<div class="text-desc">
					A social networking iOS app where people can find the most happening places around them or in any city in the world
				</div>
			</div>
		</div>