Project List + Project Thumbnail on Link Hover
-
Hello —
I would like to display the projects as a list where the project thumbnails appear on mouseover. I know this is something that has been brought up in the forums in the past.
http://laythemeforum.com:4567/topic/826/hovering-over-text-showing-thumbnail
Any tips on where to start?
Thanks! -
you totally need advanced skills with jQuery to do this.
It is possible but like Armin already said – not easy to achieve.
Roughly:
- You need to get the class of the image.
- Then you position it with position fixed
- Then you hide it
- Then you need to write a jQuery which adds a class to it when you hover the title of the project
You will need to work with each loops.
If you are further with it – let me know and I might help in with the details.
Best!
Marius
-
Yes - Please. I saw an example you provided a user somewhere in the forum. I'm definitely up to the task.
Thanks! -
you totally need advanced skills with jQuery to do this.
It is possible but like Armin already said – not easy to achieve.
Roughly:
- You need to get the class of the image.
- Then you position it with position fixed
- Then you hide it
- Then you need to write a jQuery which adds a class to it when you hover the title of the project
You will need to work with each loops.
If you are further with it – let me know and I might help in with the details.
Best!
Marius
@mariusjopen Hi Marius, I am trying to achieve almost the exact same thing explained and got stuck just before the finish line I guess..
Made a project thumbnail in Gridder and classified .projectlinks. Hid the image with CSS and want them to appear behind the Text from Thumbnail. Made a class .active + mouseenter.
Any idea what I am mixing up? Hiding the thumbnail images on the page works totally fine, but they just won't appear hovering them. (btw. getting no error in inspector console). Any help I is a lot appreciated!CUSTOM CSS
.col[data-type="text"] img {
position: absolute;
z-index: -1;
display:none;
}
.active {
display: block!important;
}CUSTOM <HEAD> CONTENT
<script>
jQuery(function($) {
$('a.projectlink').on('mouseenter', function(event){
$(this).addClass("active");
});
});</script>
-
hey everybody,
im thinking about doing a plugin that does this one day
im sorry for not helping you how to do this in a custom way, i got too many other things to do
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it