Hi there,
We have a number of Toolset grids like on this page: enlace oculto
Is there a way of turning each whole grid item into a link?
Not just the image and title, the whole thing, this linking to each post.
I'm wanting to get rid of the buttons hence I ask.
I would also like, if possible, that when any area in this grid item is hovered over, the image has a slight, white color overlay.
I have tried all kinds to see if this works, can't get it to work without breaking stuff.
Thanks in advance.
Is there a way of turning each whole grid item into a link?
Yes, you can wrap the entire grid element in a link tag and use the wpv-post-url shortcode to set the href attribute. Here's a simplified version:
<wpv-loop>
<a href="[wpv-post-url]">
[wpv-post-featured-image]
[wpv-post-title]
</a>
</wpv-loop>
The caveat here is you cannot include other links inside this link. That would be invalid HTML.
I would also like, if possible, that when any area in this grid item is hovered over, the image has a slight, white color overlay.
Toolset doesn't offer anything like this built-in. It's a custom CSS effect. If you can show me a working HTML / CSS version, I might be able to help you integrate Toolset elements into that design.
My issue is resolved now. Thank you!
Christian,
Sorry I forgot the second part of my question and your offer to help me with a hover action.
I have added this code to a view:
.feat-image-link:hover {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: .5s ease;
}
.feat-image-link:hover {
opacity: 0.23;
}
On this page: enlace oculto
If you hover over an image, this the idea however if possible to have this if you hover over any of the link area, the image 'only' has the hover action. I've tried all sorts and can't get it to work.
One thing I noticed is it looks like you added a wpv-loop tag inside the Loop Item in Destination Lake District template. See wpv-loop.png, taken from the view editor page here:
enlace oculto
You should remove this opening wpv-loop tag and the corresponding closing wpv-loop tag from the loop template, since the loop tags are already programmed in the loop editor. You can't have a wpv-loop inside another wpv-loop like this in a single View. I included it in my example code above just to illustrate where you would add the link tag.
If you hover over an image, this the idea however if possible to have this if you hover over any of the link area, the image 'only' has the hover action. I've tried all sorts and can't get it to work.
Sorry but the first sentence here is a bit confusing. When I hover over the image, the image has a hover effect but the text does not change. If I hover over the text below the image, nothing happens. Can you provide a bit more detail about what you would like to achieve? Take a look at your markup here. Notice that the class feat-image-link only encloses the image. So any opacity change effects applied to .feat-image-link can only effect changes inside the div containing the featured image:
<div class="feat-image-link">
[wpv-post-featured-image size="custom" width="546" height="520" crop='true']
</div>
If you want to apply an opacity change to the image and the text area below the image simultaneously, you should add the :hover CSS to some container element that is an ancestor of both the image and the text area below it...like the link tag itself. You could apply a special CSS class to the link tag instead, and then target the image and text area below it simultaneously for some opacity change.
Example HTML:
<a href="#" class="some-class">
<div class="the-image-container">...</div>
<div class="the-text-container">...</div>
</a>
CSS:
.some-class {
/* it is usually best to apply a display:block or display:inline-block here to make the entire link area active for mouse events */
display:block;
}
.some-class:hover .the-image-container {
/* these styles are applied to the image container, whenever the user mouses anywhere into the <strong>a</strong> tag */
}
.some-class:hover .the-text-container {
/* these styles are applied to the text area container below the image, whenever the user mouses anywhere into the <strong>a</strong> tag */
}
Hi there,
Thank you ref...
"One thing I noticed is it looks like you added a wpv-loop tag inside the Loop Item in Destination Lake District template."
I didn't add this purposely and unsure what would have prompted me to do so. Thank you for pointing out the correction.
Sorry I didn't explain what I was attempting to achieve. ref the hover.
In essence, like with CTA's in Elementor, if you hover over any part of the loop item, the image has a hover action.
At present it's just the image that changes.
See pic attached. The idea, if possible, if you hover over the what background, the image has the hover action.
Whatever I do makes the text and icons change also, this I don't wish.
Okay the code I provided earlier shows how you can use CSS to update the image container when someone rolls into the link.
Goodness, this is driving me crazy.
I have tried to achieve what you have advised however, no matter what I do it either breaks things or simply wont work.
I understand what you're saying but cant get this to work with what I have.
I simply can't get the hover action to work on the image 'only' while hovering over the lower text box.
I don't wish the text box or it's text to have its opacity changed, just the image.
The code is below that I have, would you mind demonstrating below, what I need to to do so only the image opacity is changed when either the image of text area is hovered? Thank you.
[wpv-post-featured-image size="custom" width="546" height="520" crop='true']
[wpv-post-title]
[types field='location'][/types]
<span class='number-style'>[types field='guests' format='FIELD_VALUE'][/types]</span></span></div>
<div class="col-sm-3"><span class='icon-style-1'><i class="fas fa-bed"><span class='number-style'>[types field='bedrooms' format='FIELD_VALUE'][/types]</span></span></div>
<div class="col-sm-3"><span class='icon-style-1'><i class="fas fa-bath"><span class='number-style'>[types field='bathrooms' format='FIELD_VALUE'][/types]</span></span></div>
<div class="col-sm-3"><span class='icon-style-1'><i class="fas fa-paw"><span class='number-style'>[types field='dogs-number' format='FIELD_VALUE'][/types]</span></span></div>
</div></div>
<div style = "height:15px;"></div>
[wpv-post-excerpt length="14" count="word"]
[wpv-conditional if="( $(wpcf-ribbon) ne '' )"]
<span class='ribbon'>
<p>[types field="ribbon"][/types]</p>
</span>
[/wpv-conditional]
</div></div>
I couldn't say for sure by looking at some HTML code. CSS from your theme and other stylesheets will influence things like how text links act when you hover over their container element. You may need to override some CSS styles that are applied to this content, or inherited from ancestors. It's best to put what you have so far up on the site so we can both review it and I can give you some feedback. Please note this has turned into a custom CSS question so it will be prioritized lower on my queue of tickets. Toolset-specific questions get priority, and this really isn't Toolset-specific any longer.
Guess we'll just leave this then!
