Topic: Feature needed in page: in Portfolio – hover over effect – simple zoom in « SeaTheme

This topic has 9 replies, 3 voices, and was last updated 2 years, 9 months ago by SeaTheme.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 27, 2019 at 12:07 am #18104

J
Participant

Purchased
Expired

Hello

Would be cool to have a simple zoom effect in hover over state on the portfolio featured image thumbnails.

Thank you : )

WordPress Customization Service from $49 Only! Save your expensive time!

March 27, 2019 at 2:16 am #18105

SeaTheme
Keymaster

Purchased
Expired

Hi,

There is the “Image Zoom in” of “Mouseover Effect” selector. 🙂

Regards!
Bwsm – uiueux.com – Twitter – Facebook

WordPress Customization Service from $49 Only! Save your expensive time!

March 27, 2019 at 9:38 am #18114

J
Participant

Purchased
Expired

Hi, thank your getting back.

I meant a simple zoom in without the image rotating off its axis. We have all architectural photos and looks quite strange to see the image zoom and rotate.

What do you say?

WordPress Customization Service from $49 Only! Save your expensive time!

March 28, 2019 at 1:57 am #18118
SeaTheme
Keymaster

Purchased
Expired
Hi, welcome!

It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:
```
.img-zoom-in .grid-item-inside:hover .lazy-loaded {
    -webkit-transform: scale(1.1) rotate(0deg);
    -moz-transform: scale(1.1) rotate(0deg);
    transform: scale(1.1) rotate(0deg);
}
```
Regards!
Bwsm – uiueux.com – Twitter – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

March 28, 2019 at 9:54 am #18119

J
Participant

Purchased
Expired

Thank you very much – your promptness in assisting is just phenomenal!

WordPress Customization Service from $49 Only! Save your expensive time!

August 10, 2023 at 12:11 pm #29845

hughsyd
Participant

Purchased
Expired

Hi

I want to do this action as J asked for back in 2019, & is in the forum

I have copied this custom CSS into the Additional CSS panel in the latest SEA theme version, & clicked Publish. There is no change to the action in the masonry grid portfolio layout however. Is there other things that need to be done, or does the action not happen in Sea?

Many thanks

WordPress Customization Service from $49 Only! Save your expensive time!

August 10, 2023 at 12:18 pm #29846

hughsyd
Participant

Purchased
Expired

Hi

I see the mouseover effect is now called “enlarge image”

WordPress Customization Service from $49 Only! Save your expensive time!

August 11, 2023 at 2:06 am #29849
SeaTheme
Keymaster

Purchased
Expired
Hi,

Please update the CSS codes as:
```
.img-zoom-in .grid-item-inside:hover .grid-item-img {
    -webkit-transform: scale(1.1) rotate(0deg);
    -moz-transform: scale(1.1) rotate(0deg);
    transform: scale(1.1) rotate(0deg);
}
```
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

August 18, 2023 at 6:21 am #29866

hughsyd
Participant

Purchased
Expired

Perfect and thank you. You make things so great. Is it possible then to have the same action on:

– a single image element ( as opposed to the standard zoom where the visible size of the image box expands)?

or even a background image in a group?

WordPress Customization Service from $49 Only! Save your expensive time!

August 19, 2023 at 2:37 pm #29869
SeaTheme
Keymaster

Purchased
Expired
Hi,
Please add the CSS codes as:
for single image:
```
.bm-image-zoomed .single-image-img {
    clip-path: none;  
}
.bm-image-zoomed:hover .single-image-img { 
    transform: scale(1.1); 
}
```
the css for Group background image, but it is not a perfect solution, there is no transition effect. I can not find a better solution
```
.bm-background-img {
 transition: .5s;
}
.bm-wrap:hover .bm-background-img {
	background-size:110%
}
```
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.