[Support request] Want to change image hover effect

Home Forums Support [Support request] Want to change image hover effect

Home Forums Support Want to change image hover effect

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #624958
    Soumyadip

    Hi tom i have tasty theme installed on my site allchickenrecipes.com and it has hover effect like this

    .post-image img:hover {
    opacity: 0.9;
    }

    but i want to change the effect to this one

    /* Photo hover shine effect with contrast increase */
    .pp-infobox-image,
    article.post .post-image {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    }
    .pp-infobox-image::before,
    article.post .post-image::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: ”;
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    }
    .pp-infobox-image:hover::before,
    article.post .post-image:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
    }
    .pp-infobox-image:hover img,
    article.post .post-image:hover img {
    -webkit-filter: contrast(125%);
    filter: contrast(125%);
    transition: .3s ease-in-out;
    }
    @-webkit-keyframes shine {
    100% {
    left: 125%;
    }
    }
    @keyframes shine {
    100% {
    left: 125%;
    }
    }

    which is installed on your horizon theme ,
    problem is that when i am putting the code on my css after removing the previous one it’s showing the effect when i am hovering on my images but when i am trying to save the theme it is not saving see the image here (i.is.cc/uVTpAl2.png)

    plz help me regarding this how the change the hover effect and why it is not saving.

    #625319
    Tom
    Lead Developer
    Lead Developer

    That’s strange – is there a specific line highlighted telling you why it won’t save?

    If not, you can copy all of your CSS and validate it to make sure there’s no syntax errors: https://jigsaw.w3.org/css-validator/#validate_by_input

    #625395
    Soumyadip

    Hi Tom, I have checked this code

    .pp-infobox-image,
    article.post .post-image {
    	margin-bottom: 30px;
    	position: relative;
    	overflow: hidden;
    }
    .pp-infobox-image::before,
    article.post .post-image::before {
    	position: absolute;
    	top: 0;
    	left: -75%;
    	z-index: 2;
    	display: block;
    	content: '';
    	width: 50%;
    	height: 100%;
    	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    	-webkit-transform: skewX(-25deg);
    	transform: skewX(-25deg);
    }
    .pp-infobox-image:hover::before,
    article.post .post-image:hover::before {
    	-webkit-animation: shine .75s;
    	animation: shine .75s;
    }
    .pp-infobox-image:hover img,
    article.post .post-image:hover img {
      	-webkit-filter: contrast(125%);
    	filter: contrast(125%);
      	transition: .3s ease-in-out;
    }
    @-webkit-keyframes shine {
    	100% {
    		left: 125%;
    	}
    }
    @keyframes shine
     {
    	100% {
    		left: 125%;
    	}
    }

    on your tool it’s showing no errors plz see this image (i.is.cc/vP1IQB7.png) and it’s still not saving but it has some warning see this image(i.is.cc/vP4Xj7S.png) i think because of this it is happening.
    Plz help regarding this

    #625496
    David
    Staff
    Customer Support

    Hi there,

    those warnings in the CSS validator are not an issue (they are CSS2 vendor prefixes that are deprecated in CSS3 but are required for old browser support).

    Does the Additional CSS save ok if you add other code?

    #625557
    Soumyadip

    When I am putting those code in my CSS it’s showing me the live effect but the problem is that I cannot save the CSS it’s showing this(i.is.cc/uVTpAl2.png) “looks like something went wrong”
    So what to do now I want that hover effect.

    #625577
    David
    Staff
    Customer Support

    There is nothing wrong with that particular code. Can you try adding just part of the code to see if the error occurs, this will help troubleshoot the problem.

    #625602
    Soumyadip

    I did that too but then also it’s the same message “looks like something went wrong”

    #625604
    David
    Staff
    Customer Support

    OK, so it could be a conflict, can you try #1 here:

    https://docs.generatepress.com/article/debugging-tips/

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.