Possible to have hover over image effect as well as expanding text box?

Silly me! I added a href link with target to # on the post above. Obviously this has rendered as an actual hyperlink.
??

you can use the .colomat-hover class to define the trigger hover-over css.
can you post the exact shortcode you are currently using (wrapped using the code formatting next to the b-quote button above)

Hi Baden, Many thanks for your quick reply.

I’ve had a play with the .colomat-hover in my child theme’s css but unfortunately I can’t seem to get it to work with a basic background hover colour.

I haven’t really got any code to send you as I’ve tried and deleted a few times now as I’ve got myself confused. I’ve removed the href # as this just sent the user to the top of the page so I’m guessing this is the wrong way to do it.

Here is a link to the dev site that I’m doing my trials on:https://recyclemad.com/case-studies/

Hopefully there is a tutorial somewhere that could help me?

Look forward to hearing from you.

OK, we’ll try and help as much as we can, but you really need to make sure you read the collapse-o-matic documentation. there is quote a lot covered there.

I’d like to remove the arrow

trigclass="noarrow"

and have a text and semi transparent bg colour hover over effect on the image that says ‘read more’, when clicked the expanding text box slides out under the image. Is this possible?

this is unclear. hover-over effect on the image that says read-more. so you are using an image and not text as your trigger? if you want a semi-transparent color overlay, you will have to build a rather complex trigger using the roll-your-own method.

Also, changing the background of a container will not affect the contents of the container. You will have to use a second container that is absolutely placed over the trigger and use rather complex css or jquery to trigger this on hover over.

If you maybe could be more detailed or sketch up exactly what you are trying to accomplish, we might be of more help to you.

Hi Baden

Many thanks again for your quick reply.

My customer’s requirements have changed and hopefully easier to implement!

They only now want the image trigger to have a colour change on hover. Is this possible? I have tried using .colomat-hover but this only works with text triggers.

Do you think it’s still something to do with roll your own?

Many thanks

Hi Baden

Me again, I’ve managed to create a hover over effect (yipee) from the guide you referred me to. The downside is that the whole thing (image and expanding text) fades and I don’t think it’s possible to just fade the image. ??

I’m pleased I got this far though!

Hi me yet again.

I did it! I’ve now got just the image that fades by adding another unquie div and styling just the image:

<div class=”mine”>
[expand title=”<img src=’https://xxx.jpg’/>&#8221; alt=”xxx” trigclass=”noarrow” tag=”div”]
<p>Text here</p>[/expand]</div>

.mine img:hover{opacity: 0.4;
filter: alpha(opacity=40); }

Thank you
??

glad you got it figured out! issue marked as resolved.