[Resolved] Hover style picture with font icon adding too my view

[Author]

Posts

[stephanieK-5]

Hi Jamal,

could you provide help to transfer this hover style to my view here

I would like to add the hover animation incl. font icon. Could you provide help for the steps, how to find out the css?

This is the page with the animation hover style picture from elementor:

hidden link

This is the view where I would like to add the same CSS hover style & animation:
hidden link

Picture hover style (what I guess?):

.attachment-400x400 a > span {
    position: relative;
    z-index: 2;
    transition: color .3s;
    vertical-align: middle;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.attachment-400x400

 a:hover > span {
    color: rgba(255, 255, 255, 0.75);
}

.attachment-400x400

a > span {
    position: relative;
    z-index: 2;
    transition: color .3s;
    vertical-align: middle;
  
  .icomoon-the7-font-the7-zoom-02::before, .icon-im-hover-004 span::before {
    content: "\ec02";
}
    display: flex;
    flex-flow: column;
    justify-content: center;
}

Thank you so much for your kind guidance!

[Jamal]

Hello and thank you for contacting the Toolset support.

The CSS code won't be enough to achieve such animation. The HTML markup needs to be prepared in order for CSS to style it. For example, the codes that you shared target some specific parts of the HTML. This code:

.icomoon-the7-font-the7-zoom-02::before, .icon-im-hover-004 span::before {
    content: "\ec02";
}

is meant to style an icon tag that has the class "icomoon-the7-font-the7-zoom-02" or a span tag inside an element that has the class "icon-im-hover-004".

Well, the HTML markup needs to have classes or IDs that the CSS targets. Copying only CSS from the Elementor page won't be enough.

On the other hand, Elementor adds some styles that are specific to each page. Copying a code such as:

.elementor-424 .elementor-element.elementor-element-266289d {
    --content-bg-color: #FFFFFF00;
}

Won't work as expected, because this code was meant for a specific element(#266289d) in a specific Elementor element with ID 424.

What I try to say, is that it would be much easier to build this animation with your own CSS than reusing Elementor's and The7's styles. Check these examples for inspiration:
- hidden link
- hidden link

Finally, I am afraid, this is considered custom code and is therefor out of the scope of the Toolset support. If you are not comfortable with programming consider hiring developer. This is a list of our partners https://toolset.com/contractors/
https://toolset.com/toolset-support-policy/

[stephanieK-5]

Hey Jamal

thanks for your advice. I thought I need to apply custom css hover for:

- background transition .3s;
- transition color: rgba(255, 255, 255, 0.75);
- zoom
- icon .icomoon-the7-font-the7-zoom-02::before, .icon-im-hover-004 span::before {
content: "\ec02";

Aren't these codes standard codes you could provide ? Not complaining but try to understand the root of the problem

I thought maybe that code here could be a base:

div.wp-block-image figure.tb-image.tb-image-dynamic

My best and a great day!

[Jamal]

Honestly speaking, this request is considered custom code and is therefor out of the scope of the Toolset support. https://wpml.org/purchase/support-policy/
I consider it custom code because it is not related to Toolset API. It is rather related to custom CSS code that will style the output of a Toolset view, beyond what Toolset offers.
- https://toolset.com/documentation/programmer-reference/

For example, Toolset Blocks allows to generate an image block, and offers a wide range of styling options(scale on hover as an example). However, the overlay part that contains the icon is not offered by Toolset. Maybe a compatible blocks plugin offers such feature.
- https://toolset.com/documentation/dynamic-sources-in-popular-blocks/

If you inspect the7 theme posts grid HTML, you will notice that the on-hover overlay and icon are generated by a specific part. Maybe this image explains it better hidden link

Toolset blocks(Image block as an example) generate different HTML, and will not generate the overlay-and-icon part, unless you create them(maybe a container block, and an icon block inside of it), and style them(Custom CSS) separately. Toolset blocks does not give full control of the generated HTML.

To fully control the generated HTML, you will need to use a Classic HTML block, or a Fields&Text block, and shortcodes. Or by creating the content template with the legacy editor.

If you want to use the same HTML markup from the7 theme, you can do something like:

<div class="post-thumbnail-wrap rollover-active this-ready">
	<div class="post-thumbnail">
		<a href="[wpv-post-url]" class="post-thumbnail-rollover" aria-label="Post image">
			[wpv-post-featured-image size='custom' width='300' height='200'] 
			or [types field="the-image-field"][/types]
		</a>
		<div class="project-links-container">
			<a href="[wpv-post-url]" class="project-details" aria-label="Details link">
				<span aria-hidden="true" class=" icomoon-the7-font-the7-zoom-02"></span>
			</a>
		</div>
	</div>
</div>

Then you can copy the CSS parts that styles the CSS class "project-links-container", the icon, the scale transition, etc.

I hope this makes sense. However, we do help our clients with simple custom code solutions when possible and not against the time of other clients.

Let me know if you got stuck, and I'll do my best to help.