CODEWITHSUNDEEP
htmlcss
user3722818
user3722818

Reputation: 11

Change multiple css elements when hovering

I am trying to accomplish an effect with CSS3, I would like to slide a figcaption from the bottom of a figure and slide the figure up when hovering.

more or less like shows this example: http://tympanus.net/Tutorials/CaptionHoverEffects/index3.html

Unfortunately, when hovering just the figure slides, while figcaption doesn't show up (it does not change its opacity, nor it translates)

Here is the code I am using:

#figure:hover img{
options}

and it works, but

#figure:hover figcaption{

options}

is not working, why it applies the hover just to the img element and not to figure? http://jsfiddle.net/GKfQ2/

Thanks to the answerers in advance :)

Upvotes: 0

Views: 100

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

You hae not applied a transform value to the hover state of the figcaption

JSfiddle Demo

Revised CSS

li {
    list-style: none;
    display: inline-block;
    overflow: hidden;
}

#featured figure{
    margin:0;
    position:relative;
}

#featured figure img {
    max-width:100%;
    display:block;
    position:relative;
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    -o-transition: -o-transform 0.7s;
    transition:transform 0.7s;}

figure:hover img{

    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);

}

figure figcaption{
    position:absolute;
    bottom:0;
    padding:14px;
    background: #ddd;
    width:100%;
    height:50px;
    opacity:1;
/* the relevant bits */
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);    
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.7s;
    -moz-transition: -moz-transform 0.7s;
    transition: transform 0.7s;
}

figure:hover figcaption{
    opacity:1;
/* the relevant bits */
    -webkit-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);    
    transform: translateY(0%);

}

h4{
    font-size:18x;}

span{font-size:13px;
    color:black;}

Upvotes: 1

Related Questions