как вы делаете это опрокидывание состояния с помощью CSS

Question

http://www.habib-fadel.com/en/artwork/

Пожалуйста, может кто-нибудь сказать мне, как это сделать парение состояния.

Это мой HTML в данный момент:

<div class="grid-item"> 
    <a href="#"> 
    <div class="details"> 
     <div class="title">Portrait VII</div> 
     <div class="icon-cross icon"></div> 
    </div> 
    </a> 
    <img src="images/1.jpg"> 
    </div> 

Answer 1

HTML

<div class="grid-item"> 
    <a href="#" class="hoverItem"> 
     <div class="details"> 
      <div class="title">Portrait VII</div> 
      <div class="icon-cross icon"></div> 
     </div> 
    </a> 
    <img src="http://www.habib-fadel.com/data/oeuvres_2716d/fiche/62/vign_kaa_1528_4cf8a.jpg"> 
    </div> 

CSS

.grid-item { 
    width:200px; 
    position:relative; 
} 

.grid-item:hover a{ 
    transform: scale(1); 
} 

.grid-item img { 
    width:100%; 
} 

.grid-item a { 
    display:block; 
    background-color:red; 
    top:0px; 
    position:absolute; 
    width:200px; 
    height:100%; 
    transform: scale(0); 
    transition:0.2s linear all; 
} 

.grid-item .title { 
    text-align: center; 
    width: 100%; 
    display: block; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}