|
Post by Elli on Aug 16, 2019 10:23:59 GMT -7
Hover Text Over Background Image Preview HTML
<div class="ht-container"> <span class="ht-container__text">This is some hidden text</span> <img src="http://placehold.it/300x250" class="ht-container__image"> </div>
CSS
.ht-container { background-color: #000; height: 250px; position: relative; width: 300px; }
.ht-container__text { color: #fff; opacity: 0; position: absolute; text-align: center; top: 40%; transform: translateY(-50%); transition: all 0.4s ease-in-out; width: 100%; z-index: 999; -webkit-backface-visibility: hidden; }
.ht-container:hover > .ht-container__text { opacity: 1; top: 50%; }
.ht-container__image { position: relative; transition: opacity 0.3s ease-in-out; z-index: 99; -webkit-backface-visibility: hidden; }
.ht-container:hover > .ht-container__image { opacity: 0.2; }
|
|