- This topic has 7 replies, 3 voices, and was last updated 5 years, 8 months ago by David.
-
AuthorPosts
-
July 16, 2018 at 9:05 am #624958Soumyadip
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.
July 16, 2018 at 9:22 pm #625319TomLead DeveloperLead DeveloperThat’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
July 16, 2018 at 11:08 pm #625395SoumyadipHi 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 thisJuly 17, 2018 at 2:21 am #625496DavidStaffCustomer SupportHi 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?
July 17, 2018 at 3:28 am #625557SoumyadipWhen 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.July 17, 2018 at 3:59 am #625577DavidStaffCustomer SupportThere 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.
July 17, 2018 at 4:48 am #625602SoumyadipI did that too but then also it’s the same message “looks like something went wrong”
July 17, 2018 at 4:50 am #625604DavidStaffCustomer SupportOK, so it could be a conflict, can you try #1 here:
-
AuthorPosts
- You must be logged in to reply to this topic.