Hover effect on pictures

Hi, do you know how to make this hover effect: https://jsfiddle.net/wf7twxo1/embedded/result,html,css? It will be on the pictures here: https://tobiasnielsendesigns.com/doxafilm/ :slight_smile:

Best regards
Tobias

Hi there,

Please tell me more specifically, which pictures that you want to implement the hover effect?

Hi Awan

I forgot to mention that, but it involves all the pictures with the white triangle. Thoose are linking to a vimeo video. 3 at the top and two at the bottom.

I see… Try this:

.fancybox-vimeo img {
    transition: 0.6s ease;
}
.fancybox-vimeo:hover img {
    transform: scale(1.075);
}

Is it possible to get the zoom effect only on the picture. Right now the picture is hovering outside it´s frame?

Hello Tobias, sorry that I can’t help you, but could you tell me what did you use to make the video transitions on the header? I’ve tried out some plugins, but nothing so great. Nice job.

Hi Spannenberg, are you thinking about the header video? Then it is just a background video, where it is edited like that, so you see different settings.

But do you think it is possible to make that css effect when hovering? :slight_smile:

Oh. I see. The transitions are on the video. So now I had to find some good videos for my stuff.

I’m not any kind of expert on CSS, but I think your problem maybe sets on the DIV where you are aplying the effect. It’s on the fancyboxes, so all the fancybox zoom. Inspecting your code, first I would try to replace the “.fancybox-vimeo” (wich is a DIV) from the suggested code, for “.pgc-w5b3e0d774acce-0-1” (wich is the DIV for the first image - the KARAMELLERIET video link).

But as I said, I’m not any kind of expert. Maybe it doesn’t even work. But it’s free to try.
Tell me if it works, if you try.

The code will be like:

.pgc-w5b3e0d774acce-0-1 img {
transition: 0.6s ease;
}
.pgc-w5b3e0d774acce-0-1:hover img {
transform: scale(1.075);
}

If this code solves your problem, then you had to do this piece of code for every img/div on the site.

But as I said, I’m not any kind of expert. Maybe it doesn’t even work. But it’s free to try.
Hope it solves the problem and helps.

Best regards.

The class: pgc-w5b3 etc. you are suggesting is a random generated one, so someday the class will change and then the code doesn’t work. The “.fancybox-vimeo” is a class from a plugin that makes that lightbox effect. I cant´t make it work, but I think I know someone else who can help me, thanks.

If I can ask about something else on the same site :slight_smile:. At the about us page https://tobiasnielsendesigns.com/doxafilm/om-os/ I got theese pictures which should touch each other when resizing. Without phone number and e-mail it works allright, but it could be nice if I could have them as well. When inserting theese 2, then this will happen:

. I would like to avoid the break between the rows. If you can´t help me, can you maybe ask another one to help? :slight_smile:

Best regards
Tobias

I think, I put the phone number and e-mail on another page, if it is not possible :slight_smile:

Hi @tobias-17nielsen,

Please try to add this CSS code below:


	@media (min-width:769px){
		#pg-w5b3e0d774acce-0> .panel-row-style{
			height: 227px;
		}
		#pg-w5b3f98bc67565-0> .panel-row-style{
			height: 290px;
		}
		#pg-w5b3f98bc6766d-0> .panel-row-style{
			height: 247px;
		}
	}

	@media (min-width:1024px){
		#pg-w5b3e0d774acce-0> .panel-row-style{
			height: 320px;
		}
		#pg-w5b3f98bc67565-0> .panel-row-style{
			height: 315px;
		}
		#pg-w5b3f98bc6766d-0> .panel-row-style{
			height: 337px;
		}
	}
	@media (min-width: 1200px){
		#pg-w5b3e0d774acce-0> .panel-row-style{
			height: 417px;
		}
		#pg-w5b3f98bc67565-0> .panel-row-style{
			height:400px;		
		}
		#pg-w5b3f98bc6766d-0> .panel-row-style{
			height:435px;
		}
	}
	@media (max-width: 1024px){
		.slide-inner{
			top: 28%;
		}
	}
	@media (max-width: 990px){
		.slide-inner{
			top: 65%;
		}
	}
	@media (max-width: 768px){
		.slide-inner{
			top: 20%;
		}
	}
	@media (max-width: 500px){
		.slide-inner{
			top: 25%;
		}
	}

And add this javascript code using this plugin

jQuery('.fancybox-vimeo').parent().css('overflow', 'hidden')

I can´t get it work unfortunately. The pictures are not hovering. Do I perhaps need to add a class for the pictures or the row or do you have another idea? :slight_smile:

Please implement the code in above and let me check what is not working yet. :slight_smile:

Should I insert this part as well:
.fancybox-vimeo img {
transition: 0.6s ease;
}
.fancybox-vimeo:hover img {
transform: scale(1.075);
}

I have inserted the rest now. It also seems, like there is a conflict with the main-title in front of the video. I inserted the text manually through JavaScript, but now the main-title is gone.
The rows with the pictures are again been separated.
Do you know how to fix the hover without changing anything else? :slight_smile:

Best regards
Tobias

yes,

you right, the javascript in above causing a conflict on your site. Please remove the javascript in above and use this CSS code instead:

.home .textwidget, .home .textwidget p {
    overflow: hidden;
}

In desktop it works fine now, but there are some other problems instead.
When I removed the main-title and button, how do I reestablish it?

The rows also act weird when rezing to smaller devices, then the pictures are again being separated. Is it possible to achieve, that they get together like before? :slight_smile:

I notice you already resolve this? I didn’t see the main title and the button in the header.

I don’t understand. can you explain?

The main-title and button are there again and the hovering effect are working, great :slight_smile:
When I drag the browser to half width, the rows get separated. This is for 1099 px:

. Do you see the same?
The last 2 pictures are working fine, so it will be nice, if it could work like that?

To disable the text and button in the header slider, you just need to empty the text field in the Customize > header area > header slider

And add this CSS code for more screen size handler:

@media (min-width:1099px){
	#pg-w5b3f98bc67565-0> .panel-row-style{
		height: 340px !important;
	}
}

@media (min-width:1440px){
	#pg-w5b3f98bc67565-0> .panel-row-style{
		height: 435px !important;
	}
}
@media (min-width:2500px){
	#pg-w5b3e0d774acce-0> .panel-row-style{
		height: 742px !important;
	}
	#pg-w5b3f98bc67565-0> .panel-row-style{
		height: 735px !important;
	}
	#pg-w5b3f98bc6766d-0> .panel-row-style{
		height: 765px !important;
	}
}

Hi, I needed that main-title and button of course, so it is nice, that it’s working now.

I found out, that it was enough to just keep this part, but thanks anyway :slight_smile:
.fancybox-vimeo img {
transition: 0.6s ease;
}
.fancybox-vimeo:hover img {
transform: scale(1.075);
}
.home .textwidget, .home .textwidget p {
overflow: hidden;
}

Otherwise there were resolutions, where there were mistakes

1 Like