The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS effect for the image

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #276879

    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.

    Code pen
    Thank you


    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;

    I wait have help you.


    Now it works perfectly.
    The moment I put the css code conflicts with the theme code.
    I found the whole container here

    So now looks at the site

    Original site

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


    Now it works fine.

    Thanks a lot


    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:

    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% */


    Thanks wanderval, it was very helpful for me

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.