Animate green tab on hover with pure css

Question

I have the following HTML

<table style="position:relative; left: 10px; top:5px;">
            <tr id="all_extended">
                <td id="pucenas">
                    <img id="cenas"></img>
                </td>
                <td id="slide">
                    <div id="slider">
                    </div>
                </td>
            </tr>
</table>

AND CSS

#slide{
  height:100%;
  border: none;
  padding-left:20px;
  display:none;
}

#slider{
  border: none;
  padding-left:30px;
  background-color:green;
  position:relative;
  height:100%;
  opacity:0;
  width:0px;
  overflow:hidden;

  transition: width 10s linear 2s;
  /* safari is webkit */
  -webkit-transition:width 1s linear 2s;
    transition: opacity 10s linear 2s;
  /* safari is webkit */
  -webkit-transition:opacity 1s linear 2s;
}

#cenas{
    width:99%;
    height:100%;
    border: solid black 1px;
    position:relative;
    left: 0%;
}

#pucenas{
  font-size: 0;
  width:100px;
  height:100px;
  position:relative;
  border: solid black 1px;
  margin: 0px;
  padding: 0px;
  cursor:pointer;
}

#all_extended:hover #slide{
    width: 200px;
    display:inline;
}

What I would want is for a green tab to appear when we hover the black square, just like this image shows http://awwapp.com/s/99/5e/21.png (it should be animated and with pure css). Any ideas on this one?

@Cam ignore the src in this problem please :p sorry for the link, i've updated the question now! — user111671, Jan 20 '14 at 18:13
That's the coolest animation storyboard I've ever seen. Can't make head nor tails from it, but it's cool. — Niels Keurentjes, Jan 20 '14 at 18:13
@NielsKeurentjes is it that hard to follow the lead of the red arrows? — user111671, Jan 20 '14 at 18:30
Yes actually. I really have no clue what you want from that image. — Niels Keurentjes, Jan 20 '14 at 18:33
@NielsKeurentjes ok, sorry then. When you hover the **black** square, a **green** tab should appear as it is on top of the image and **fade** when the mouse is not hover the black square. Back and forth if I put my mouse on and out of hover consequently. — user111671, Jan 20 '14 at 18:37
This, `` should be avoided due to tables not working with position relative correctly. It has a list of bugs, here is a helpful SO question: http://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements. — Josh Powell, Jan 20 '14 at 18:44
@user111671 Is this what you are looking for? http://jsfiddle.net/Josh_JM/WhFm3/2/ or this, http://jsfiddle.net/Josh_JM/WhFm3/3/ — Josh Powell, Jan 20 '14 at 18:52
@JoshPowell Hello Josh! What I really wanted is this with pure css http://awwapp.com/s/e0/35/56.png I've been trying again now but i just couldn't do it because your fiddle would return to the top of the image, and I want it to do the rever animation **when fading**. Hope I could be clear now! :) — user111671, Jan 20 '14 at 19:10
@user111671 Refer to my answer, I believe this is what you want. — Josh Powell, Jan 20 '14 at 19:26

score 0 · Answer 1 · answered Jan 20 '14 at 19:16

Here's what I've got to offer:

http://jsfiddle.net/U7A95/1/

html

<div id="all_extended">
    <div id="pucenas">
        <img id="cenas" src="http://lorempixel.com/80/80/"></img>
    </div>
    <div id="slide">
    </div>
</div>

css

#slide{
    display:inline-block;

    margin-left:30px;
    background-color:green;
    width:0px;
    opacity:0;

    overflow:hidden;
    position:absolute;
    bottom:0;
    top:0;

    transition: all 1s linear 1s;
    -webkit-transition: all 1s linear 1s;
}

#all_extended:hover #slide{
    width: 200px;
    opacity: 1;
}

#pucenas{
    display:inline-block;
}
#all_extended{
    position:relative;
}

To transition multiple properties, use all, if you just list width and opacity in separate rules the last overwrites the previous, so only one transitions. To get the height right, I set the top and bottom to 0, so it clings to the top and bottom of the wrapper.

score 0 · Accepted Answer · answered Jan 20 '14 at 19:24

This is how I went about it with the use of animating the .slider's width and gradient.

Here is the html:

<div class="parent">
    <div class="slider">
        <span>Some content about this image</span>
    </div>
</div>

The css:

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: url("http://fc01.deviantart.net/fs71/i/2011/237/8/a/fox_yawn_by_krankeloon-d47t1ut.jpg");
    background-position: center;
    background-size: cover;
}

.slider {
    position: absolute;
    left: 110%;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0));
    background: -moz-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0));
    background: -ms-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0));
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    overflow: hidden;
    width: 0;
    text-wrap: none;
}

.parent:hover .slider {
    background: rgba(9, 146, 26, 1);
    width: 100%;
}

Finally here is a fiddle: Demo

Animate green tab on hover with pure css

2 Answers2