Archived topic
Want to change image hover effect
7 replies · Started by Soumyadip on July 16, 2018
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.
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
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
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?
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.
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.
I did that too but then also it's the same message "looks like something went wrong"
OK, so it could be a conflict, can you try #1 here:
