Home Forums Porto Template Easy way to make an hover on image

This topic contains 2 replies, has 2 voices, and was last updated by  reyvax 5 days, 19 hours ago. This post has been viewed 55 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10023775

    reyvax
    Participant

    Hi there,
    Im looking to make an “mousse “hover image” on first image.
    I mean, i would like change image when mouse go on.

    What is the easy way?

    Thanks,
    Xavier


    #10023778

    Support2
    Keymaster

    Hello Xavier,

    Porto don’t come with that feature, but with some CSS code we can do it easily. Please follow the steps below:

    1) HTML:

    <span class="thumb-info thumb-info-hide-wrapper-bg my-custom-thumb-info">
    	<span class="thumb-info-wrapper">
    		<img src="img/projects/project.jpg" class="img-fluid" alt="">
    		<img src="img/projects/project-1.jpg" class="img-fluid" alt="">
    		<span class="thumb-info-action">
    			<span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
    		</span>
    	</span>
    </span>

    * Note that added the class my-custom-thumb-info.
    * Note that added 2 images.

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

    /* Hide and position second image */
    .my-custom-thumb-info .thumb-info-wrapper img:nth-child(2) {
    	position: absolute;
    	top: 0;
    	left: 0;
    	opacity: 0;
    	visibility: 0;
    }
    
    /* Hide first image when hover */
    .my-custom-thumb-info:hover .thumb-info-wrapper img:nth-child(1) {
    	opacity: 0;
    	visibility: 0;
    }
    
    /* Show second image when hover */
    .my-custom-thumb-info:hover .thumb-info-wrapper img:nth-child(2) {
    	opacity: 1;
    	visibility: 1;
    }

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 week ago by  Support2.
    #10023804

    reyvax
    Participant

    It’s work !

    Thanks for your quick answer,

    Regards,
    X


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