CODEWITHSUNDEEP
htmlcsshover
JordanMiguel
JordanMiguel

Reputation: 740

Div taking up full width of page

I've implemented a hover state that overlays text when a div is hovered.

Here is the code - 

.desktop-image {
  position: relative;
}

.img_description {
  position: absolute;
  top: -13%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}
<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>
</div>

The problem When I inspect the page I notice that the div .desktop-image is taking up the full width of the screen (see pic).

enter image description here

Question How can I make this div wrap to the size of the actual image, so that the hover state is ONLY implemented when that image is hovered, as opposed to when anywhere within the blue section is hovered.

Thanks

Upvotes: 1

Views: 3798

Answers (5)

felixmosh
felixmosh

Reputation: 35503

By default div's are defined with display: block, meaning that they will take the entire available width.

You can specify that .desktop-image will be display: inline-block; and you will get the wanted result.

My suggestion to you is to use semantic HTML, there are 2 element that are dedicated to what you trying to achieve figure & figcaption.

Added an example with them.

.desktop-image {
  position: relative;
  display: inline-block;
}

.desktop-image img {
  vertical-align: middle;
}

.img_description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}
<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>

  <figure class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <figcaption class="img_description">This image looks super neat.</figcaption>
  </figure>
</div>

Upvotes: 6

Seena James
Seena James

Reputation: 3

Add CSS property clear: both to the div with the class desktop-image.

Upvotes: 0

Rakesh Raj
Rakesh Raj

Reputation: 129

By default div tag has a default display property display: block

In your code <div class="desktop-image"> div appear full width of the display

set a width: and a min-height: property to solve the problem 

.desktop-image {
   position: relative;
   width: 200px; /*new*/
   height: 200px; /*new*/
}

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Please see this.

.desktop-image {
  position: relative;
  display: inline-block;
}

.img_description {
  position: absolute;
  top: -13%;
  bottom: 0;
  left: 0;  
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
  right:0;
}
.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}
<div id="images" class="misma">
  <div class="desktop-image">    
      <img src="http://via.placeholder.com/200x200">
      <p class="img_description">This image looks super neat.</p>    
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>
</div>

Upvotes: 0

Jahangeer Shams
Jahangeer Shams

Reputation: 36

Specify the width of the .desktop-image class in percentage like .desktop-image{width:70%;} or whatever percentage suit the page design.

By doing that image will remain in this .desktop-image div.

Upvotes: -1

Related Questions