Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #279035
    Bastien Chilloux
    Participant

    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

    #279083
    Skandha
    Keymaster

    @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

    #279092
    Bastien Chilloux
    Participant

    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.

    #279101
    Bastien Chilloux
    Participant

    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 ?

    #279103
    Bastien Chilloux
    Participant

    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.

    #279104
    Bastien Chilloux
    Participant

    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.

    #279099
    Bastien Chilloux
    Participant

    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 ?

    #279126
    Skandha
    Keymaster

    @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

    #279136
    Bastien Chilloux
    Participant

    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.”

    #279189
    Skandha
    Keymaster

    @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

    #279195
    Bastien Chilloux
    Participant

    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 !

    #279196
    Bastien Chilloux
    Participant

    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.