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

Posted by gyatmnucla
gyatmnucla
7,618 Points

Problem with a side project

Hello everyone ! I don't know if I can ask for help for a side website I am creating to practise, but here's my problem: on the news part of the website http://fnaticmaintenance.net76.net/ I added an overlay to fade on hover with an opacity transition. There are 4 news. The code for each new is exactly the same, but, for the first new it works correctly, for the second new when the transition ends half of the overlay disappears, and for the two others, when the transition ends, the whole overlay disappears.

Maybe someone can help me by inspecting, Thanks in advance !

Jesus Mendoza
Jesus Mendoza
23,289 Points

Can you share the css?

gyatmnucla
gyatmnucla
7,618 Points 
/* News */

.news h1 {
    margin: 40px auto;
}

.new {
    padding: 30px;
    background:#E2E2E2;
    margin: 10px 0px;
    color: #02707f;
    border-left: 5px solid #1797b7;
    transition: all 300ms linear 0s;
}
.new p {
    margin: 0;
    color: #167093;
}

.new h2{
    color: #1797b7;
    font-family: monospace;
    display: inline-block;
    margin: 0 0 0 0;
    font-weight: 400;
    font-size: 20px;
}
.new h3{
    color: white;
    background: #2f2f2f;
    text-shadow:0px 1px 0px rgba(255,255,255,0.58);
    font-size: 13px;
    display: inline-block;
    padding: 5px;
    text-align: center;
    margin: 0 0 0 5px;
}

.news {
    padding: 10px;
}

.news a {
    position: relative;
}
.overlay:hover {
    opacity: 1;
    transition: all 300ms linear 0s;
}
.overlay {
    background: rgba(0, 0, 0, 0.5);
    border-left: 10px solid #1797b7;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    transition: all 300ms linear 0s;
}

.overlay li {
    background: #1797b7;
    border-bottom: 4px solid #137e99;
    position: absolute;
    top: 50%;
    vertical-align: middle;
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    padding: 5px 20px;
    list-style: none;
    text-transform: uppercase;
    color: white;
}

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

This might help you, it's a pen I did a few minutes ago http://codepen.io/Jesusz0r/pen/KwxWYK

/* Instead of */
.overlay:hover {
   opacity: 1;
   transition: all 300ms linear 0s;
}

/* Do */
.news:hover > overlay {
   opacity: 1;
   transition: all 300ms linear 0s;
}
gyatmnucla
gyatmnucla
7,618 Points

I posted the css.

Jesus Mendoza
Jesus Mendoza
23,289 Points

I edited my answer, check it out

gyatmnucla
gyatmnucla
7,618 Points

I think you meant

 .new:hover > .overlay {
   opacity: 1;
   transition: all 300ms linear 0s;
}

but anyways, it does the same... Idk what to do