Home Forums Porto Template text over image

This topic contains 10 replies, has 2 voices, and was last updated by  Support2 1 week ago. This post has been viewed 65 times

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #10022765

    gunterseb
    Participant

    Hi,

    I searched but I don’t find the way to do that…

    What is “that” ? … let me explain :

    I use the code found into shortcodes-image-frames.html and I would like to have :

    • the text “Project Title” visible when you’re out from the image
    • the opacity to 1 when you’re out from the image
    • keep the text (Project Title and Project Type) visible when you’re hover the image
    • the opacity like at 0,65 or something like this when you’re hover the image

    I found when I remove the class “thumb-info-hide-info-hover”, I have that I want when you’re hover the image, but don’t have text when I’m out from the image …

    I hope it’s clear 🙂

    Hereafter the code I use :

    
    <div class="col-md-4">
    	<h5 class="text-uppercase mt-lg">Hide Info Hover</h5>
    	<a href="portfolio-single-small-slider.html">
    		<span class="thumb-info thumb-info-centered-info thumb-info-hide-info-hover">
    			<span class="thumb-info-wrapper">
    				<img src="img/projects/project.jpg" class="img-responsive" alt="">
    				<span class="thumb-info-title">
    					<span class="thumb-info-inner">Project Title</span>
    					<span class="thumb-info-type">Project Type</span>
    				</span>
    			</span>
    		</span>
    	</a>
    </div>
    

    Thanks



    Template Version: 5.7.2
    #10022770

    Support2
    Keymaster

    Hello,

    We need some custom CSS to make that, please follow the steps below:

    1) Add the class “custom-thumb-info-style”, like the code below:

    <span class="thumb-info thumb-info-centered-info thumb-info-hide-info-hover custom-thumb-info-style">

    2) Add in (css/custom.css):

    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover .thumb-info-wrapper:after {
        opacity: 1;
    }
    
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover .thumb-info-title {
        transform: translate(0%, -50%);
    }
    
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover:hover .thumb-info-title {
        opacity: 1;
    }
    
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover:hover .thumb-info-wrapper:after {
        opacity: 0.65;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022771

    gunterseb
    Participant

    Thanks first for your quick answer and help.
    it works at 90%, but can’t find how now to remove the opacity applied on image when I’m out of it ?

    I tried to play with different opacity values but nothing change visually

    And if you could explain how to change the color and size of text (when I’m hover and when I’m out the image)

    Big thanks


    #10022772

    Support2
    Keymaster

    Hello,

    In that case change the opacity to “0” on first style of my last reply, like the code below:

    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover .thumb-info-wrapper:after {
        opacity: 0;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022773

    Support2
    Keymaster

    Hello,

    To change the text color and size, add the code below in (css/custom.css):

    /* Change text color and size of title */
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover .thumb-info-title .thumb-info-inner {
        color: red;
        font-size: 18px
    }
    
    /* Change text color and size on hover of title */
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover:hover .thumb-info-title .thumb-info-inner {
        color: white;
        font-size: 26px;
    }
    
    /* Change text color and size of subtitle */
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover .thumb-info-title .thumb-info-type {
        color: red;
        font-size: 14px;
        background-color: green; // background color
        transition: ease all 300ms;
    }
    
    /* Change text color and size on hover of subtitle */
    .custom-thumb-info-style.thumb-info.thumb-info-hide-info-hover:hover .thumb-info-title .thumb-info-type {
        color: white;
        font-size: 20px;
        background-color: yellow; // background color
    }

    * Please see the comments explaining.

    Kind Regards,

    Rodrigo.


    #10022774

    gunterseb
    Participant

    ok don’t work on safari Version 10.1.2 (12603.3.8) and works on chrome Version 61.0.3163.79 (MAC for both)

    any idea ?


    #10022775

    gunterseb
    Participant

    I flushed my cache, cache on my hosting was flushed and desabled .. but can’t see any color change (green or red like in the example you given to me)


    #10022776

    Support2
    Keymaster

    Hello,

    Please send the link of your website for us, so we can inspect your code and discover why is not working for you.
    Also we will make test for the Safari issue.

    Kind Regards,

    Rodrigo.


    #10022777

    gunterseb
    Participant
    This reply has been marked as private.
    #10022778

    gunterseb
    Participant

    ok it works now everywhere… cache problem somewhere
    sorry for that


    #10022786

    Support2
    Keymaster

    Hello,

    No problem 🙂

    Great that worked now.

    If you need further assistance, please contact us.

    Kind Regards,

    Rodrigo.


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