-
Posts
-
Hey all,
I am looking to change the a:hover effect of an image from the default (lower opacity, icon overlay) to making the image slightly smaller (to create that button effect) — on TWO specific pages only. Is that a possibility?
a:hover .image-overlay {}
AND
a:hover .image-overlay .image-overlay.inside {}It seems that their CSS is located in base.css and layout.css, respectively.
Basically, what I’m asking is: how would I go about changing the image hover (that is a link) on two specific pages, and make the images slightly smaller to create that ‘button’ effect?
Thank you again!
Hey!
You can target the page by its ID and then that specific image as long as it has the class for it. Without seeing the page and image live I couldn’t say for sure or what the specific css would be but its probably doable.
Best regards,
DevinDevin,
I am using the Advanced Layout builder, and have added the images using the ‘image’ media element. Where would you recommend adding a class to a specific image (maybe I am overlooking the simplicity of this)?
Also, would the CSS for setting a specific hover effect to an image on a specific page look like this (just as an example):
.page-id-1108 .solution1:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform:: rotate(360deg);
}
*The class for the image would be “solution1”.I appreciate all of your help.
Hi!
Please try adding following code to Quick CSS instead
.page-id-1108 img.solution1:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform:: rotate(360deg); }Regards,
YigitYigit,
Thanks for the response.
The issue I am having is not being able to specify a class for the image using the Advanced Layout Editor. When I go over to the default editor to do so, it is blank (99% of the time). Sometimes I see the shortcode in the default editor (for whatever reason) but cannot figure out where to add a class to the image.
Thanks
Hi Yigit,
I am developing locally and I am not aware of any way for you to access the site.
Would providing you with the source code of the specific page help?
I could add a class if the code was displayed in the default editor, but it does not always display. Do you know why this is (and how I can access it)?
Thanks!
Hi!
Please adjust following code to your image and add it to quick CSS in Enfold theme options
.page-id-2666 img.avia-builder-el-1:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform:: rotate(360deg); }To find element ID, please right click on that particular image and “inspect elements” on Chrome or in Firefox. In my case, it is .avia-builder-el-1 http://i.imgur.com/IOHNE6Y.jpg
To find page ID, you can right click on Chrome and on Firefox and click Inspect Elements to find out page ID’s http://i.imgur.com/TrDQ84Y.jpg
Regards,
YigitHi Yigit,
I am seeing a similar class name, but it is in the < a > tag, not the < img > tag.
When applied to custom.css, it does not change a thing. Any thoughts?
Hi!
Please try following code
.page-id-1108 a.avia-builder-el-4 img:hover { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform:: rotate(360deg); }Cheers!
YigitSo I believe this is a step in the right direction, as when I hover in certain areas around/over the image, it will start to rotate but then just stops. It still utilizes the default a:hover css.
I guess the better question is: what css file would I look in to disable/comment out the default image a:hover css for the entire theme?
Ive tried to inspect element in my browser, but cannot seem to find the specific class or it’s location.
First turn on the custom css field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Then you can target it a bit more directly and override anything that gets added default. Commenting out the base css is a very poor way of modifying the theme unless you are comfortable with doing backups to the core files for each update. Even then with how often we change the css it may not really work.
If you can put up the dev site on a live test server we can inspect and help further. You can also force the hover state via dev tools which should make it easier to find the conflict with whatever you are trying to accomplish.
Hi!
Yes, in enfold/js/avia.js search for
function avia_hover_effect(container) { if(container == 'body') { var elements = $('#main a img').parents('a').not('.noLightbox, .noLightbox a, .avia-gallery-thumb a, .avia-layerslider a, .noHover, .noHover a').add('#main .avia-hover-fx'); } else { var elements = $('a img', container).parents('a').not('.noLightbox, .noLightbox a, .avia-gallery-thumb a, .avia-layerslider a, .noHover, .noHover a').add('.avia-hover-fx', container); }and add your element/class to the “not” filter list – i.e. if your class is called “mycustomclass” the modified code must look like
function avia_hover_effect(container) { if(container == 'body') { var elements = $('#main a img').parents('a').not('.noLightbox, .noLightbox a, .avia-gallery-thumb a, .avia-layerslider a, .noHover, .noHover a, .mycustomclass, .mycustomclass a').add('#main .avia-hover-fx'); } else { var elements = $('a img', container).parents('a').not('.noLightbox, .noLightbox a, .avia-gallery-thumb a, .avia-layerslider a, .noHover, .noHover a, .mycustomclass, .mycustomclass a').add('.avia-hover-fx', container); }Cheers!
Peter
- The topic ‘Changing Image a:hover Effect for Specific Pages’ is closed to new replies.