ssabin ssabin - 2 months ago 7
CSS Question

Displaying text over an image on hover with transition

I'm trying to create a fade transition with opacity (see my JSFiddle) that will be shown when you hover the circle.

How do I achieve a pretty fade-in of the

myContent
element?

<div class="circle">
<div class="myContent">
<div class="name">Sasasaas</div>
<div class="position">asfasfasfas</div>
</div>
</div>


This is the CSS I'm using

.circle {
width: 300px;
height: 300px;
border: 1px black solid;
border-radius: 200px;
background-image: url("http://vignette3.wikia.nocookie.net/yogscast/images/c/c7/Pixel_face_eyebrow_raised_600x600.png/revision/latest/scale-to-width-down/480?cb=20130529234139");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
margin: auto;
-webkit-filter: grayscale(50%);
-webkit-transition: all 0.5s;
}

.circle:hover {
-webkit-filter: none;
}

.myContent {
opacity: 0;
width: 170px;
height: 170px;
text-align: center;
padding: 15px;
/**position: relative;
visibility: hidden;
-webkit-transition: visibility 0.5s;**/
}

.circle:hover .myContent {
opacity: 1;
}

Answer

Try below codes, add transition to .mycontent and set it's width as 100%, then add padding-top:50% thus by using text-align:center and padding-top it aligns your text to center of image vertically and horizontally.

 .circle {
   width: 300px;
   height: 300px;
   border: 1px black solid;
   border-radius: 200px;
   background-image: url("http://vignette3.wikia.nocookie.net/yogscast/images/c/c7/Pixel_face_eyebrow_raised_600x600.png/revision/latest/scale-to-width-down/480?cb=20130529234139");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   margin: auto;
   -webkit-filter: grayscale(50%);
   -webkit-transition: all 0.5s;
 }
 
 .circle:hover {
   -webkit-filter: none;
 }
 
 .myContent {
   opacity: 0;
   width: 100%;
   height: 170px;
   text-align: center;
   padding-top: 50%;
   transition: 1s ease;
 }
 
 .circle:hover > .myContent {
   opacity: 1;
 }
<div class="circle">
  <div class="myContent">
    <div class="name">Sasasaas</div>
    <div class="position">asfasfasfas</div>
  </div>
</div>

Comments