Enlarge image inline

[eutaw]

I have images that I am enlarging (transforming) on hover, but I would like them to stay inside the border. Is there a setting similar to inline-block that I can use? More info is in secure notes.

Also, your church demo for x theme (https://demo.theme.co/church/) shows two images in the Events section that have an opacity when hovering. What element does that? I want my images to do the opposite: have an opacity initially but appear 100% when hovering.

One other thing, some of your demos show that the color of text changes when hovering as well as transformation of the image. (See the Latest Blogs section of https://demo.theme.co/lawyer/.) I don’t see how this is done when text is in another element, as my text is. Please help.

[christian]

Hey @eutaw,

Our demos use the Classic Recent Post element and the styles are built-in.

You’re using the Image element and the styles and animation you need are not yet possible to achieve without the use of custom CSS.

I’ll show you some code but please note that this is outside the scope of our theme support. This is just a guide to help you get started. We cannot entertain further questions for the sample code so you must learn how it works.

Check out the following video and code:

2021 01 19 01h05 03

.x-image:hover img {
  transform: scale(1.2);
  opacity: 1;
}

.x-image img {
  opacity: 0.4;
  transition: all 1s;
}

.x-image {
  overflow: hidden;
}

Hope that helps and thank you for understanding.

[eutaw]

Thank you very much and I will try that. Is it possible to have a color other than gray for initial opacity?

I noticed when I was looking for another way to achieve this, there’s something similar in the Design Cloud. I have added the page to my secure note. It does almost all I want it to do except I want opacity initially and no opacity when I hover. It appears that this design is accomplishing everything via settings. Please take a look. This is using Creative Column 4 design.

[marc_a]

Hi @eutaw,

As my colleague said that we cannot entertain further questions because it will fall under customize and it is outside the scope of our theme. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you.