how to edit css of text column with images on shopify debut theme

Technical Q&A
1

To whom it may concern,

I would like to add a hover effect on the images of the section “Text columns with images”.

Where do I start?

2

Hi @schoe3 ,

Go to Assets > theme.css and paste this at the bottom of the file:

.feature-row__image-wrapper .feature-row__image{
	transition: opacity .4s cubic-bezier(.25,.46,.45,.94);
}
.feature-row__image-wrapper:hover .feature-row__image,
.feature-row__image-wrapper:focus .feature-row__image{
	transform: scale(1.03);
	transition: transform .5s ease !important;
}

Hope it helps!

3

Thank you LitExtension for a supportive response.

I tried out the code, pasted the file to the bottom of the theme.css of the debut theme. Saved.

However, I did not see any changes.

The situation is that I want the GIF in the text column images to start when someone hovers over it. Maybe that could change the whole approach. I don’t know.

I understand that the added CSS is referring to the class of the tag inside the column section.

I am new to Shopify Theme and liquid.

Is there another approach?

4

Hi @schoe3 ,

GIF: what does it mean?

When you add my code, it will add a zoom effect on image hover, like following demo: https://dawn-theme-default.myshopify.com/

Screenshot.png
Screenshot.png1580×907 175 KB

Are you looking for other effects?

5

My apologies. I noticed the zoom-in feature when you hover it. Thank you.

I noticed in your demo that when you hover over, the image changes let alone the zoom effect. How was that done?

6

GIF is gif. A compressed image format is used to loop frames. My bad

7

Hi @schoe3 ,

So now it works fine?

Or do you want another hover effect?

8

Hi LitExtension my “old friend”,

I am very appreciative of the zoom effect. transform: scale(1.03);

However, like in your demo, I noticed that the image also changes when you hover over. How was that possible?

9

Hi @schoe3 ,

Are you checking the same section as the screenshot I sent?

Please send the site link, I will check it for you

10

Alright, I give in.

The site is : https://pholder.xyz/

11

I’ve been getting feedback that when all the gifs are playing, it becomes overwhelming.

I would like to add a hover feature where the first image is a stationary square and the second image is playing out the gif.

I think this is a CSS problem? I need your help

12

on your demo, when you don’t hover it looks like the first image. when you hover, it looks rotated (which I’m assuming is the second image)

before1.png
before1.png468×430 29.2 KB

after2.png
after2.png415×357 26.1 KB

13

Hi @schoe3 ,

With the screenshot you sent, it belongs to product and shows with 2 images, if you want to display 2 images with ‘Text Column With Images’ section, you need to add a section to add a 2nd product to it.

Please send me the code of the file: feature-columns.liquid I will help you check and add it