鼠标悬停正在进行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>