CODEWITHSUNDEEP
jqueryhtmlcss
Learning
Learning

Reputation: 20001

Overlay of one div with another div not working on mouse hover

I am showing articles in a matrix of 2x3 and i wrapper article details image, title, author & Desc inside wrapper div & i want this whole div to be overlaped by another div of same dimension which contains one image.

I tried but it is not working for me below is the partial code i am working on 

   <div id="article2x3-article-wrapperHP">
      <div id="article2x3-image">
         <img src="../images/article/3897b78e-6770-4cf0-a8e5-8638e733c0f4.jpg" class="imgArticle2x3Image" />
      </div>
      <div id="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title </span>
      </div>
      <div id="article2x3-author">
         <span class="lblArticle2x3Author" >by Author XYZ</span>
      </div>
      <div id="article2x3-desc">
         <span class="lblArticle2x3Desc" >Some Description of teh article wil do here</span>
      </div>
     <div class="overlay2x3"><img alt="google" src="http://www.google.com/images/logos/ps_logo2.png" /></div>
   </div>


   <div id="article2x3-article-wrapperHP"  >
      <div class="overlay2x3"><img alt="google" src="http://www.google.com/images/logos/ps_logo2.png" /></div>

      <div id="article2x3-image">
         <img src="../images/article/0e7207e6-d5e6-4f10-9224-988fe0ca338e.png" class="imgArticle2x3Image" />
      </div>
      <div id="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title</span>
      </div>
      <div id="article2x3-author">
         <span class="lblArticle2x3Author" >>by Author XYZ<</span>
      </div>
      <div id="article2x3-desc">
         <span class="lblArticle2x3Desc" >>Some Description of teh article wil do here</span>
      </div>
   </div>


$("#article2x3-outer-wrapperHP").hover(
    function(){$(this).find(".overlay2x3").stop(true, true).fadeIn(500)},
    function(){$(this).find(".overlay2x3").stop(true, true).fadeOut(500)}
);

Complete code on jsFiddle

I am not sure why hover is not triggering, I would appreciate help in this regard

Upvotes: 0

Views: 353

Answers (2)

Lowkase
Lowkase

Reputation: 5699

The selector for "#article2x3-outer-wrapperHP" is the main problem here, you define it twice. Drop the use of IDs and turn to classes:

http://jsfiddle.net/e54cz/

HTML

 <div class="article2x3-article-wrapperHP">
      <div class="article2x3-image">
         <img src="https://twimg0-a.akamaihd.net/profile_images/2788088920/ddc41d50d200366d3fbcb4483ee2154e.jpeg" class="imgArticle2x3Image" />
      </div>
      <div class="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title </span>
      </div>
      <div class="article2x3-author">
         <span class="lblArticle2x3Author" >by Author XYZ</span>
      </div>
      <div class="article2x3-desc">
         <span class="lblArticle2x3Desc" >Some Description of teh article wil do here</span>
      </div>
     <div class="overlay2x3"><img alt="google" src="http://upload.wikimedia.org/wikipedia/en/6/61/Apple_Safari.png" /></div>
   </div>


   <div class="article2x3-article-wrapperHP"  >
      <div class="overlay2x3"><img alt="google" src="http://upload.wikimedia.org/wikipedia/en/6/61/Apple_Safari.png" /></div>

      <div class="article2x3-image">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLU7TVcauaFMxvO9VVqi82GHljZECxqxT6RvZ6Q7KQ1nlD4wC7nv1ATgE" class="imgArticle2x3Image" />
      </div>
      <div class="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title</span>
      </div>
      <div class="article2x3-author">
         <span class="lblArticle2x3Author" >>by Author XYZ<</span>
      </div>
      <div class="article2x3-desc">
         <span class="lblArticle2x3Desc" >>Some Description of teh article wil do here</span>
      </div>
   </div>

CSS

.article2x3-article-wrapperHP {
float:left;
width:233px;
height:324px;
vertical-align:middle;
margin-right:25px;
overflow:hidden;
background-color: #f5f5f5;
}
.overlay2x3
{
    height:324px;
    width:233px;
    background-color:Red;
    display:none;
    padding:0px;
  z-index:1000;
}
.article2x3-image
{
    margin-top:10px;
    margin-bottom:10px;
    width:233px;
    height:155px;
    overflow:hidden;

}
.article2x3-title
{
    min-height:20px;
    max-height:36px;
    margin:10px 0 0 0;
    width:230px;
    overflow:hidden;

    font-size:14px;
}
#article2x3-author
{
    height:14px;
    margin:0 0 5px 0;
    width:230px;
    overflow:hidden;
     font-size:10px;
     font-style:italic;
     color:Gray
}
.article2x3-desc
{
    height:100px;
    margin:0 0 10px 0;
    width:230px;
    overflow:hidden;
     font-size:12px;
     border:0px solid #f5f5f5;
     text-align:justify;
}
.imgArticle2x3Image
{
    width:230px;
    border:0px;
    -moz-box-shadow: 1px 2px 3px #777;
    -webkit-box-shadow: 1px 2px 3px #777;
    box-shadow: 1px 2px 3px #999;
}

Upvotes: 1

Paul
Paul

Reputation: 9022

It will work, but you need to position the various divs: see http://jsfiddle.net/4qeqm/9/

The overlay div must be positioned absolutely, the wrapper must have position: relative;.

EDIT: Please review your HTML, you are using the same ID on different elements. This will generate problems. Try using classes for similar objects.

Upvotes: 1

Related Questions