- This topic has 9 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
May 8, 2020 at 6:22 am #1275238Simone 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?May 8, 2020 at 9:15 am #1275592LeoStaffCustomer SupportHi 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/May 15, 2020 at 4:45 am #1285451Simone LongatoHi 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.
May 15, 2020 at 5:20 am #1285474DavidStaffCustomer SupportHi 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
May 15, 2020 at 6:24 am #1285559Simone LongatoHi 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/May 15, 2020 at 6:34 am #1285571DavidStaffCustomer SupportTry 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; }
May 15, 2020 at 6:34 am #1285572Simone LongatoSorry,
I’ve solved.
Thanks anyway!
May 15, 2020 at 6:35 am #1285575DavidStaffCustomer SupportGlad to hear that π
May 15, 2020 at 6:41 am #1285586Simone LongatoI’ve just resolved exactly making the same you says π
Thanks David!
May 15, 2020 at 6:44 am #1285590DavidStaffCustomer Supportπ
-
AuthorPosts
- You must be logged in to reply to this topic.