Jump to content

Recommended Posts

Posted

Hello,

I am new to html and trying to add some to my website. Thanks to google and places like this, I've managed to successfully add some images with text overlay which hyperlink to other pages. However, each time I add an image like this, it places it below the last one instead of next to it. How do I get them to sit side by side?

Here's my html:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}
</style>

<div class="container">
  <a href="https://melancholyapparel.com/collections/mens/Hoodie"><img src="https://cdn.shopify.com/s/files/1/0516/5039/6356/products/pullover-hoodie-mockup-featuring-a-bearded-man-with-a-beanie-28312_2048x.png?v=1608665853" alt="Avatar" class="image">
  <div class="overlay">Men's Hoodies</div>
</a></div>
<div class="container">
  <a href="https://melancholyapparel.com/collections/womens/Hoodie"><img src="https://cdn.shopify.com/s/files/1/0516/5039/6356/products/hoodie-mockup-of-a-woman-sitting-on-a-tree-stump-2780-el1_1728x.png?v=1612387598" alt="Avatar" class="image">
  <div class="overlay">Women's Hoodies</div>
</a></div>

Posted

The div element is a block element, block elements effect is to occupy the total width area available, causing other elements following it to stack.

Fix: float or use display: inline-block; instead.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...