[Support request] A:hover text on portfolio

Home Forums Support A:hover text on portfolio

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1275238
    Simone Longato

    Hi,

    I’m trying to set an a:hover text on portfolio item, which I need to show only on mouse hover in https://www.magnetmarketing.it/portfolio/.

    I set in the page content:

    <div class="hover11 port">
    <div>
    <div class="figport"><a href="https://www.magnetmarketing.it/portfolio/brand-identity-b2b"><img src="https://www.magnetmarketing.it/wp-content/uploads/creazione-brand-identity-B2B.jpg" alt="Creazione brand identity nel settore B2B"></a></div>
    <span>Creazione brand identity nel settore B2B</span>
    
    </div>
    <div>
    <div class="figport"><a href="https://www.magnetmarketing.it/portfolio/programmatore-di-siti-web"><img src="https://www.magnetmarketing.it/wp-content/uploads/programmatore-siti-internet.jpg" alt="programmatore siti internet"></a></div>
    <span>Pulizia codice programmazione sito web</span>
    
    </div>
    </div>

    and for css:

    .port {
    	margin: 15px 15px 0;
    	padding: 0;
    }
    .port:last-child {
    	padding-bottom: 60px;
    }
    .port::after {
    	content: '';
    	clear: both;
    	display: block;
    }
    .port div {
    	position: relative;
    	float: left;
    	width: 300px;
    	height: 200px;
    	margin: 0 0 0 25px;
    	padding: 0;
    }
    .port div:first-child {
    	margin-left: 0;
    }
    .port div span {
        position: absolute;
        bottom: -20px;
        left: 0;
        z-index: -1;
        display: block;
        width: 300px;
        margin: 0;
        padding: 0;
        color: #444;
        font-size: 18px;
        text-decoration: none;
        text-align: center;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
        opacity: 0;
    }
    
    .figport {
    	width: 300px;
    	height: 200px;
    	margin: 0;
    	padding: 0;
    	background: #fff;
    	overflow: hidden;
    }
    .figport {
        display: block;
    }
    .figport:hover+span {
    	bottom: -36px;
    	opacity: 1;
    	z-index: 1;
    }
    
    /* Opacity #1 */
    .hover11 .figport img {
    	opacity: 1;
    	-webkit-transition: .3s ease-in-out;
    	transition: .3s ease-in-out;
    }
    .hover11 .figport:hover img {
    	opacity: .5;
    }

    but it’s not working.
    Can you help me please?

    #1275592
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry where did you get the code from?

    This doesn’t sound like a theme issue?

    If it’s not theme related then I would recommend a forum like this:
    https://wordpress.stackexchange.com/

    #1285451
    Simone Longato

    Hi Leo,

    sorry for the delay.

    Actually I found the code in a website not related with the theme, but I thought maybe the theme has incompatibility with css transition properties…Is it possible?

    Thanks anyway for your help.

    #1285474
    David
    Staff
    Customer Support

    Hi there,

    the transition is working for me – did you resolve it?

    The theme doesn’t do anything that would ‘break’ a CSS transition. There are a few cases where the theme adds a CSS transition and you would need more specific or !important CSS Rules to overwrite that. But this is not the case with your .figport:hover img

    #1285559
    Simone Longato

    Hi David,

    thanks for your help.

    I’ve just trying to put the same code out from WP, you can see here: https://www.magnetmarketing.it/portfolio/portfolio%20a-hover.html
    and it’s work fine.
    I can’t fix it inside the Wp page https://www.magnetmarketing.it/portfolio/

    #1285571
    David
    Staff
    Customer Support

    Try changing this CSS:

    div.figport:hover + span {
    	bottom: -36px;
    	opacity: 1;
    	z-index: 1;
    	color: #444;
    }

    to:

    div.figport:hover + p span {
    	bottom: -36px;
    	opacity: 1;
    	z-index: 1;
    	color: #444;
    }
    #1285572
    Simone Longato

    Sorry,

    I’ve solved.

    Thanks anyway!

    #1285575
    David
    Staff
    Customer Support

    Glad to hear that 🙂

    #1285586
    Simone Longato

    I’ve just resolved exactly making the same you says 😉

    Thanks David!

    #1285590
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.