-
Posts
-
I would like to make the image of my portfolio images change when the mouse is hovered over the image. How might I go about changing this?
Hey iamspud5,
I believe this covers what you are looking for: https://kriesi.at/support/topic/enfold-portfolio-ajax-change-portfolio-grid-images-on-hover/#post-313590Best regards,
MikeI updated the php file and created a new portfolio image but it doesn’t seem to be changing on the hover. Any ideas on what might be causing that?
Hi,
I’m not sure why that would be. Could you post a link to the site in question so that we can take a closer look please? Also please share what you have tried and what results you are looking to achieve.
Best regards,
RikardHere’s the site I’m working on: http://scrocks.listofawesome.com/
You can see in my portfolio items (under I ❤ TO CREATE & CONNECT) it shows both images that I uploaded to Featured Image and Featured Image 2. But when I hover over nothing happens.
Any thoughts?
Hi Spud,
Having transparent images overlay each other is not a good idea, as you see with Yoda, but if images are not transparent you could have them overlay and toggle display on hover to show a different one. Some of the images lower got src(unknown).
The template you might want to look into is includes/loop-portfolio-single.php.
Let us know if you have any more questions.
Best regards,
VictoriaYeah I was just using the transparent images to see if both were loading. On my browser, I am not seeing any images toggling when I hover over.
Can you explain a bit more what you mean about the template I should use? Is the portfolio format that I currently have set up on the site not handling the hover correctly?
Hi iamspud5,
Here is another way you could implement it.
You are working in the right template now, since the changes are there, so keep working in that file. It’s not changing on hover, because it needs some Javascript or Css to do that.
Best regards,
VictoriaWhat css should I post in order to get it correctly working?
At the moment I have this:
#top .portfolio-preview-image .avia-gallery-thumb img {
display: none;
}.portfolio-preview-content .avia-arrow {
display: none!important;
}.portfolio-preview-image {
width: 35.6%;
}.portfolio-preview-content {
padding: 75px 100px 30px;
width: 64.4%;
background: #fff!important;
line-height: 1.8em!important;
}.portfolio_preview_container{
box-shadow: none!important;
}#top .grid-entry.no_margin.av_one_fifth {
padding: 10px;
}Hi,
Are you looking to change the image of a portfolio item on hover? Could you post a link to where you are trying this out please?
Best regards,
RikardI have the link to my site copied above: http://scrocks.listofawesome.com/ I have a few different portfolios on there right now, I’m trying to get any of them to do the hover.
Hi,
Another user managed to accomplished this but they had to manually apply the “hover image” for each portfolio item.
Site: http://mosaixgroup.com/who-we-are/
CSS code example:
/* on hover, set the opacity of the actual portfolio image to zero */ .grid-sort-container .grid-entry article.inner-entry a.grid-image:hover img { opacity: 0; } /* set the "hover image" as background for item 1 */ .grid-sort-container .grid-entry:nth-child(1) article.inner-entry a.grid-image { background-image: url(images/melissa_-_prop.jpg); } /* set the "hover image" as background for item 2 */ .grid-sort-container .grid-entry:nth-child(2) article.inner-entry a.grid-image { background-image: url(images/ellen_-_prop.jpg); } etc..Best regards,
IsmaelI can’t seem to get this to work at all and I could use a bit more guidance.
One of my portfolio items (Changemaker-in-Residence: Proposal to recruit and train innovative creators) seems to change on hover very briefly, but then no longer works after the mouse goes over it for the first time.
Can you please help?
Hi!
You didn’t change the image url. We created an example in the Quick CSS field. Check the first and second portfolio item in the home page. How did you add this internal style?
<style> .grid-image img { -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .grid-image img.top-image:hover { opacity:0; } .top-image{ position:absolute; top:0px; left:0px; } </style>Regards,
IsmaelI installed the plugin “Dynamic Featured Image” which allows me to post two featured images on each of my portfolio items. I just need to css code that will allow the one image to display and the other to display when the mouse hovers over. The css code you just shared doesn’t seem to do that.
Hi!
Please deactivate the plugin. The css code is working and you can see it in the first portfolio item. You just need to do it manually for every portfolio items in the page.
Best regards,
IsmaelOk I was able to get things working a bit with the css code from http://mosaixgroup.com/who-we-are/. But is there any additional code I can add in to remove the overlay displaying on top of the images (I just want to new image to appear, not with an additional overlay on top of it)
- You must be logged in to reply to this topic.