Div 占据页面的整个宽度

Question

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).

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

Answer 1

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>

Answer 2

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>

Answer 3

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*/
} 

Answer 4

将 CSS 属性clear: both添加到带有desktop-image类的 div 中。

Answer 5

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.