[Bastien Chilloux]

Hi,

I have a request for you.
I am looking for a way to show the title of an article display in the portfolio, not under but “on” the image, like in this website example : https://dannygevirtz.com

Do you think you could tweak this for me or add this feature on a futur update for this theme ?
Thank you !

My website : https://bastienchilloux.com

[Skandha]

@bastienchill: Hello Bastien,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#portfolio-content-section .entry-container {
    position: absolute;
    top: 50%;
    left: 28%;
}
#portfolio-content-section .entry-container a {
	color: #fff;
}

Let me know if this works out!
Kind Regarsd,
Skandha

[Bastien Chilloux]

I have applied the CSS code, it doesn’t look good so I have tweaked it a little bit but it’s not fine yet.
So I know now how to modify the text position.

I would like the text to appear when the mouse is on the picture (like in my reference) so it’s hidden before and there is like a large gallery of pictures, then when you have your mouse positioned on a picture, the text appear with the current animation.

[Bastien Chilloux]

Is it possible to get the images to become darker (in addition to the black and white fade effect) when the mouse is on an image from the portfolio ?

[Bastien Chilloux]

In addition to my last questions, can you also provide me the CSS codes for the following things :

– disable the gray scale effect (which I’would like to replace by a ‘darker fade’ effect if you can)

– disable the zoom effect

All of my requests on this topic are referring to the Portfolio module.

[Bastien Chilloux]

To give you an idea, I’d like to get the same/similar effect from the photos on this page (https://bastienchilloux.com/stills/) to be on each of the image displayed on my portfolio.

[Bastien Chilloux]

I can see this CSS code you’ve provided me doesn’t affect the mobile display, can we make it affect all the screen sizes ?

[Skandha]

@bastienchill: Hello Bastien,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.portfolio-content-wrapper .hentry-inner:hover .post-thumbnail {
	transform: unset;
}

.portfolio-content-wrapper .post-thumbnail img, .grayscale-filter-reverse .portfolio-content-wrapper .hentry-inner:hover .post-thumbnail img {
	filter: unset;
}

Let me know if this works out!
Kind Regarsd,
Skandha

[Bastien Chilloux]

Can you please consider all my questions ?

Here they are again :

“I would like the text to appear when the mouse is on the picture (like in my reference) so it’s hidden before and there is like a large gallery of pictures, then when you have your mouse positioned on a picture, the text appear with the current animation.”

“Is it possible to get the images to become darker (in addition to the black and white fade effect) when the mouse is on an image from the portfolio ?”

“To give you an idea, I’d like to get the same/similar effect from the photos on this page (https://bastienchilloux.com/stills/) to be on each of the image displayed on my portfolio.”

[Skandha]

@bastienchill: Hello Bastien,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.portfolio-content-wrapper .hentry-inner:hover .post-thumbnail {
	transform: unset;
}

.portfolio-content-wrapper .post-thumbnail img, .grayscale-filter-reverse .portfolio-content-wrapper .hentry-inner:hover .post-thumbnail img {
	filter: unset;
}

#portfolio-content-section .post-thumbnail a:hover::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

Let me know if this is what you want!
Kind Regarsd,
Skandha

[Bastien Chilloux]

Hi,

Thank you but it’s not all there.
I have an issue as the grey scale disappears when the mouse is on the texte/title, can you please fix this ?

Moreover, do you know the CSS code to :

– make the text to appear when the mouse is on the picture (like in my reference) so it’s hidden before and there is like a large gallery of pictures, then when you have your mouse positioned on a picture, the text appear with the current animation.

– disable the text/title mouvement effect ?

Thank you !

[Bastien Chilloux]

I ask you this again :
“I can see this CSS code you’ve provided me doesn’t affect the mobile display, can we make it affect all the screen sizes ?”

AND

I would also like to know if you have the CSS code to get the title text to be centered all the time whatever screen size is used ?

Please consider answering all the questions (here and before) I have asked and to just a part of it, just getting long to ask the same things several times.
Thanks

[Author]

Posts