Jump to content

How to put hyperlink images with text overlay side by side


sphwtsn

Recommended Posts

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>

Link to comment
Share on other sites

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