CODEWITHSUNDEEP
htmlcsswordpresshover
luquiyahni
luquiyahni

Reputation: 13

Hover one div make another div appear

Here is the site I'm working on: revistapuerto

It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.

The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:

#magia {
    position: relative;
}
#magia img {
    display: block;
}
#magia .cornerLink {
    width:494px;
    height:330px;
    opacity: 0;
    position: absolute;
    top: 32px;
    left: 0px;
    right: 0px;
    padding: 0px 0px;
    background-color: rgba(0,0,0,0.50);
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}
#magia:hover .cornerLink {
    opacity: 1.0;
}

Thanks!

Upvotes: 0

Views: 2024

Answers (2)

Red
Red

Reputation: 139

Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/

HTML:

<div class="showhim">HOVER ME
    <div class="showme">hai</div>
    <div class="ok">ok</div>
</div>

CSS:

.showme{ 
    display: none;
}
.showhim:hover .showme{
    display : block;
}
.showhim:hover .ok{
    display : none;
}

(also the website won't load for me, could just be my work computer!)

that shows how to use hidden divs to make divs appear using a hover.

More information and I might be able to help you out :)

Upvotes: 1

Sleek Geek
Sleek Geek

Reputation: 4686

If I understood what you want, here's how you can achieve it.

 #div-for-hover:hover #Div-you-want-to-show {
   display: block;
 }

The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show

Note: The hover could be on a headings, DIVs, images, and more.

Upvotes: 0

Related Questions