4 column image hover overlay text

Highlighted
Tourist
13 0 1

Hi, i'm looking for help to do a 4 column image with hover overlay text in the description section of the collection page. 

I can't seem to get it right for html. 1. The image is too small not the original size i posted and the text is not in the middle of the image.

<style><!--
.column{
width:100%;
position:relative;
overflow:hidden;
list-style-type: none;

}


.columnitem .columnhover{
transform: scaleY(1);
}

.columnitem{
max-width:100%;
height:auto;
position:relative;
float:left;
width: 200px;
margin: 0 0 10px 10px;
}

.columnhover{
position:absolute;
width:100%;
height:100%;
top:0%;
transform: translateY(-50%);
z-index: 2;
opacity:0;
text-align: center;
-webkit-transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
transition:all 0.3s ease-in;
background: grey;

}
.columnhover:hover{
opacity: 0.96;

}
.columndhover h{
font-size:30px;
width: 100%;
position:absolute;
font-weight:700;
line-height: 50px;

}
.columnhover p{
font-size:20px;
position:absolute;
}
</style>
<ul class="grid">

<li class="columnitem">
<img src="https://cdn.shopify.com/s/files/1/0069/3587/1615/files/Eco-Friendly.jpg?v=1597650645">
<div class="columnhover" id="marvel1">
<h5>Materials used to make the toy are sourced for ethically, made from wood from sustainable resources</h5>
</div>

</li>

<li class="columnitem">
<img src="https://cdn.shopify.com/s/files/1/0069/3587/1615/files/Eco-Friendly.jpg?v=1597650645" alt="Album Cover">
<a class="link" href="https://www.google.co.uk/search?q=hello&amp;oq=hello&amp;aqs=chrome..69i57j0l5.703j0j7&amp;sourceid=...">
<div class="columnhover" id="marvel1">
<h5>Materials used to make the toy are sourced for ethically, made from wood from sustainable resources</h5>
</div>
</a>
</li>
</ul>

1 Like
Highlighted
Shopify Partner
7507 1037 2600

Hello, @TrioKids 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
13 0 1

Hi @KetanKumar 

Thank you for helping.

Here's the URL https://triokids.com.sg/collections/tooky-toy 

i'm able to fix the alignment for the image to the center of the collection description but i can't seem to make the text align in the center of the image

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

@TrioKids 

Thanks for the details 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

 

.columnhover h5 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
    padding: 10px;
 color: #fff;
}
.collection-products {
margin-top: 50px;
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
13 0 1

Thank you so much! It work. 

But two things i would to add is the spacing between the header image and that 4 column image and change the color of the font. 

How do i add them? Would u able to help me?

0 Likes
Highlighted
Tourist
13 0 1

Hi

I manage to edit what i want but for mobile it look weird mind helping me on that?

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

@TrioKids 

Thanks 

i have update my code please check 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
13 0 1

Hi thank you. 

What about mobile? It looks weird in mobile it doesn't look responsive

0 Likes
Highlighted
Shopify Partner
7507 1037 2600

@TrioKids 

can you please share us mobile issue screenshot 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
13 0 1

IMG_1894.PNG

Here is the screenshot. I would prefer the image to load width to the mobile size

As for now all the code are actually inside the collection page description. So i am not sure if this affects the mobile responsivness?

 

0 Likes