Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Css3 Hover Transitions

Hello and all happy holidays :) But I am kind of stuck in a situation with hover popups...

So I have a little image with a bigger one as the "hover" so the hover is stays behind with opacity 0 and when I mouseover the little one the bigger one appears with opacity 1.

So far so good... The real annoying part is that the hover image appears not only when I mouseover the little one but also when the mouse passes over the bigger one. which is definitly not the idea. I only want and need it to appear when mousing over the area of the little one.

Can someone tell me what am I missing here...? :(

Code:

HTML

<ul class="grid cs-style-1">
                <li>
                    <figure>
                        <img src="images/CMC-HANDBALL.jpg" width="150" height="113" alt=""/>
                                                      <figcaption>

                                                      </figcaption>
                    </figure>
                </li>
            </ul>

CSS

.grid {
    padding: 0px 2px 1px 2px;
    width: 1100px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

.grid li {
    display: inline-block;
    width: 150px;
    margin: 0;
    padding: 0px;
    text-align: left;
    position: relative;
    clear: both;
}

.grid figure {
    margin: 0;
    position: relative;
}

.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    background: #2c3f52;
    color: #ed4e6e;
}


/* Caption Style 1 */
.cs-style-1 figcaption {
    height: 260px;
    width: 550px;
    opacity: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    z-index:100;
}

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
    -ms-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
}


.cs-style-1 figcaption h3 {
    margin-top: 70px;
}

.cs-style-1 figcaption span {
    display: block;
}

.cs-style-1 figcaption a {
    margin-top: 30px;
}

this is the css of the style i am using to animate the two pictures.

thank you so much once again :)

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Shiny,

Could you please post your html and css so we can take a look and help you out.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hey Shiny,

Posting your full code might go a long ways to us helping you solve your problem. I'd like to see what is going on with your page so that I can get a better idea of what the problem is. Thanks.

Hi marcus :)

thank you so much for the response! Here is a public link to the file i am using - https://dl.dropboxusercontent.com/u/22677020/LANDING%20NATAL%20V3/index.html

So if you mouseover outside the three in the right side, the images automatically do the over.. can't seem to find what i am missing here..... :(

thank you so much once again

1 Answer

I didnt understand exactly what you are trying to do, but I wrote up a quick codepen that shows how to set up a :hover transition for a parent div and two content div's inside of it.

http://codepen.io/anon/pen/pvbZRE

Hovering .hoverme causes .textfade to fade out and .hovered to fade in. If you need something more specific, let me know!

You can also use + to target adjacent siblings as well.

Your issue might be easier to understand if you posted your full HTML.

Hi bleedcmyk :)

thank you so much for the response! Here is a public link to the file i am using - https://dl.dropboxusercontent.com/u/22677020/LANDING%20NATAL%20V3/index.html

So if you mouseover outside the three in the right side, the images automatically do the over.. can't seem to find what i am missing here..... :(

thank you so much once again