Docs

[pablo102]

Hi
I,m trying to change the effect on my website according to this:
https://community.theme.co/forums/topic/change-portfolio-image-rollover-effect/
or this post:
https://community.theme.co/forums/topic/how-can-i-change-the-icon-and-the-rollover-hover-opacity-on-featured-images/#post-8897

I have a child theme installed and I’m changing the global css settings (in customizing menu)

It doesn’t change anything for me.
Can I ask for some support on this issue, please?

Wedding Photography Waterford Kilkenny Cork Dungarvan – ‘I do’ photography

[pablo102]

This reply has been marked as private.

[Thai]

Hi There,

Please try with this CSS instead:

.entry-featured {
	overflow: hidden;
}

.entry-featured:hover {
	background-color: #FFF;	
}

.entry-featured img {
	transform: scaleY(1);	
	transition: all 0.7s ease-in-out;
}

.entry-featured:hover img {
	transform: scale(1.2);
	opacity: 1;
}

Hope it helps 🙂

[pablo102]

no, I can’t see any change in the preview…

[pablo102]

This reply has been marked as private.

[Thai]

This reply has been marked as private.

[pablo102]

Yes, this one works!

But can I also replace the icon with text?
Also this effect affects the featured image in every portfolio entry, could we disable this, please?
And could we have the same effect on the recent posts shortcut on the main page?
Thank you!

[Christopher]

Hi there,

Update this part of code :

/* Rollover effect */
.entry-featured {
	overflow: hidden;
}

.entry-featured:hover {
	background-color: #FFF;
}

.entry-featured img {
	transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}

.entry-featured:hover img {
	transform: scale(1.2);
	opacity: 1;
}

To :

/* Rollover effect */
.page-template-template-layout-portfolio .entry-featured {
	overflow: hidden;
}

.page-template-template-layout-portfolio .entry-featured:hover {
	background-color: #FFF;
}

.page-template-template-layout-portfolio .entry-featured img {
	transform: scaleY(1);
	transition: all 0.7s ease-in-out;
}

.page-template-template-layout-portfolio .entry-featured:hover img {
	transform: scale(1.2);
	opacity: 1;
}

Add this code :

.page-template-template-layout-portfolio .entry-thumb:before,.x-recent-posts .x-portfolio .x-recent-posts-img:before {
    content: "Text";
}

.x-recent-posts-img:hover {
    transform: scale(1.2);
    opacity: 1;
}
.x-recent-posts-img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
    overflow: hidden;
}

Hope it helps.

[pablo102]

Hi there,
Thank you for the code. Could we solve few more things:
1.Disable the effect on big featured image in the post articles?
2.Change the content: “Text” font to use the general website font and be smaller to fit “See more photos”
3.Change the blue overlay in ‘recent posts’ to just dim the image like it is now in portfolio here:
https://idophotographydungarvan.ie/portfolio/
4. Changes with ‘recent posts’ works only on main page. There are ‘recent posts’ sections in every portfolio article too. Could we make it work there too, please?

Thank you!

[Rad]

Hi there,

1. You mean the dark hover effect and icon on blog index page? If yes then please add this too

.blog a.entry-thumb:hover img {
    opacity: 1;
}
.blog a.entry-thumb:hover:before {
    opacity: 0;
}

2. What I can see is the icon and not some text, it’s the portfolio icon, right?

.page-template-template-layout-portfolio .entry-thumb:before, .x-recent-posts .x-portfolio .x-recent-posts-img:before {
    content: "\f030";
}

Unfortunately, icons have only one font, and it’s the font_awesome, unless I misunderstand it. Please clarify.

3. Please add this too,

  .x-recent-posts .x-recent-posts-img:after {
        -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
    background-color: transparent;
    opacity: 0;
}

.x-recent-posts .x-recent-posts-img:hover:after {
background-color: #000;
    opacity: 0.15;
}

4. Seems to be working fine, would you mind providing a video recording? I have a feeling that what I see are different when I compared it to what’s discussed on this thread.

Thanks!

[pablo102]

Thank you,

All is great now but no 2.
It is currently an icon, because the text didn’t work for me so I didn’t want to publish it.
But I would prefer to replace every \f030 icon with text “See more photos”.
See the attachment for the idea about the problem.

[Joao]

Hi There,

Please place the code again in order that we can provide you a custom CSS to make your text look better.

Thanks

Joao

[pablo102]

It’s on now, ‘recent posts’ on the main page.

[Friech]

Hi There,

I see you were able to replace the icon with “View”, please update the code that you’re using for that to this:

.page-template-template-layout-portfolio .entry-thumb:before, .x-recent-posts .x-portfolio .x-recent-posts-img:before {
	content: "See more photos";
	line-height: 1;
	text-align: center;
	font-size: 1.25em;
}

Feel free to change the font-size value.

Hope it helps, Cheers!

[pablo102]

Fantastic!
Is there any chance to change the font type to any similar to google lato?

[Author]

Posts