CODEWITHSUNDEEP
javascriptjqueryhtmlcss
billy
billy

Reputation: 1493

trying to display div when user hovers over an image?

I have a set of images displayed, when the user hovers over them I want a small transparent div with image description displaying. Only when hovered.

The Attempt: The description div .widget_sp_image-description is displayed none an when the user hovers it is displayed to block with position: absolute.

The problem: Nothing is happening when hovering over the image. What am I doing wrong here, ideas?

HTML

<section id="widget_sp_image-7" class="widget widget_sp_image">
<img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
<div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br>
            Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj  ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br>
            Project Cycke: 2012- 2014</p>
</div>

css

/* Image Widget Images Container */
.widget_sp_image {
    position: relative;
}
.widget_sp_image-description {
    display: none;
 }

.widget_sp_image-description:hover {
    display: block;

    background-color:rgba(251, 194, 40, 0.54);
    color: white;
    position: absolute;
    top: 1px;
    width: 100%;
    min-height: 426px;
}

Upvotes: 0

Views: 93

Answers (2)

Nims Patel
Nims Patel

Reputation: 1056

Please first of assign div which you want to show and than add that div class after .widget_sp_image:hover

Like that :

.widget_sp_image:hover .widget_sp_image-description {....}

and than add css display: block;

.widget_sp_image {
  position: relative;
}
.widget_sp_image-description {
  display: none;
}

.widget_sp_image:hover .widget_sp_image-description {
  display: block;
  
  
  background-color: rgba(251, 194, 40, 0.54);
  color: white;
  position: absolute;
  top: 1px;
  width: 100%;
  min-height: 426px;
}
<section id="widget_sp_image-7" class="widget widget_sp_image">
  <img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
  <div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br> Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br> Project Cycke: 2012- 2014</p>
  </div>
</section>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

To display the div when you hover the corresponding image use the following code:

.widget_sp_image:hover .widget_sp_image-description

Why did your code not work?

You used the following code: .widget_sp_image-description:hover It would show the div when you hover over the div itself, but when the div is not displayed, then you can't ofc hover it.

Working demo

.widget_sp_image {
  position: relative;
}

.widget_sp_image-description {
  display: none;
}

.widget_sp_image:hover .widget_sp_image-description {
  display: block;
  background-color: rgba(251, 194, 40, 0.54);
  color: white;
  position: absolute;
  top: 1px;
  width: 100%;
  min-height: 426px;
}
<section id="widget_sp_image-7" class="widget widget_sp_image">
  <img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
  <div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br> Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br> Project Cycke: 2012- 2014</p>
  </div>
</section>

<section id="widget_sp_image-7" class="widget widget_sp_image">
  <img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
  <div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br> Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br> Project Cycke: 2012- 2014</p>
  </div>
</section>

Upvotes: 1

Related Questions