how do you do this rollover state using CSS

Question

Please could someone tell me how to do this hover state.

This is my HTML at the moment:

 <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>

Can we have a jsFiddle pls ? :) – Sofiene Djebali Aug 16 '15 at 12:51 — Sofiene Djebali, Aug 16 '15 at 12:51
at the very least please include your css – nomistic Aug 16 '15 at 13:11 — nomistic, Aug 16 '15 at 13:11

Sofiene Djebali · Answer 1 · 2015-08-16T13:49:30.357

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%);
}

http://jsfiddle.net/ort52qzd/2/

Awesome, thanks! Can I ask how you would vertically centre the text? I would normally use jQuery but I'd like to do it with CSS — Gus Powell, Aug 16 '15 at 13:30
@GusPowell updated, don't forget to accept and upvote the answer bro' :3 — Sofiene Djebali, Aug 16 '15 at 13:32

how do you do this rollover state using CSS

1 Answers1