Jack Toffolo Jack Toffolo - 17 days ago 5
CSS Question

Want gallery image to open up to the side rather than beneath



.drop {
display: inline-table;

}

.drop-content {
display: none;
position: absolute;
background-color: #f9f9f9;


box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px solid #333;

}


.drop:hover .drop-content {
display: block;

}

<html>
<body>
<div class="drop">
<img src="storage.jpg" alt="storage" width="200" height="150">
<div class="drop-content">
<img src="storage.jpg" alt="storage" width="400" height="300">
<div class="desc">Large storage space</div>
</div>
</div>
</body>
</html>





HTML - It works that when you hover over the image it enlarges below. I would like to get the image to open to the side as opposed to enlarging below.Is this possible? ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

<div class="drop">
<img src="storage.jpg" alt="storage" width="200" height="150">
<div class="drop-content">
<img src="storage.jpg" alt="storage" width="400" height="300">
<div class="desc">Large storage space</div>
</div>
</div>


CSS

.drop {
display: inline-table;

}

.drop-content {
display: none;
position: absolute;
background-color: #f9f9f9;


box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: 1px solid #333;

}


.drop:hover .drop-content {
display: block;

}

Answer

Maybe this will help you

JS Fiddle

I have made changes here:

.drop:hover .drop-content { display: inline-block; }

Comments