CSS effect for the image

[dani555]

Hello everyone
Does anyone know what I need to add to my css effect for the image
After the banner there are 3 pictures that have an effect.
https://templateinspire.com/opencart/wave/

Code pen
https://codepen.io/dani888/pen/WgWeBE
Thank you

[wanderval]

Hi dani555,

I did a fork and I solve the effect problem. your code it perfect I did only some adjustment
-the main problem was the image element container, it’s bigger than image
-the second problem it do you forgotten of one css rule

:after, :before {
    box-sizing: border-box;
}

https://codepen.io/wanderval/pen/MqRoOz#code-area

I wait have help you.

[dani555]

Hello
Now it works perfectly.
The moment I put the css code conflicts with the theme code.
I found the whole container here
http://prntscr.com/kxn2fj

So now looks at the site
http://prntscr.com/kxn3ai
sized

Original site
http://prntscr.com/kxn3mb

Thank you for your help, I did not figure out what to do next

[dani555]

Now it works fine.

Thanks a lot

[wanderval]

Very good,

I’m glad for your successfull
This morning I tried make a post, but I can’t, sorry.
I will leave it here what I would put in this morning, case this help you in some thing.

This was the post who I was trying make in this morning.

I saw the layout, I would like of explain better about last reply.
When I said about class=”container” this container is only to image and should not be used in the main container page, I did the some adjustment to not generate confusion. I renamed the container class to image-wrapper class

this class was created as a element parent, how you can see in this image on original website: https://prnt.sc/kxp2rq.

to solve the problem about the box-size I changed the rule css to be apply only to element “a” inside element with the class=”beffect”:

.beffect a:after,
.beffect a:before {
    box-sizing: border-box;
}

currently the image-wrapper class have a width:250px this value should be adjustment and changed for the necessity of layout

.image-wrapper {
  width: 250px; /*or 800px or 80% */
}

https://codepen.io/wanderval/pen/MqRoOz

[peterjohnson]

Thanks wanderval, it was very helpful for me

[Author]

Posts