Forum Replies Created
-
Posts
-
i should add, i’m happy to customise a template file as i’m using a child theme, just let me know which one to look for.
i should add, i’m happy to customise a template file as i’m using a child theme, just let me know which one to look for.
no, i’m wrong – didn’t work. it seems there’s a pseudo class which handles the display of the title, & the change of background color.
.grid-entry a:hover::before { content: attr(title); position: absolute; width: 100%; z-index: 1000; text-align: center; opacity: 1; font-size: 18px; color: #fff !important; transform: translateY(-50%); animation: avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275) !important; top: 50%; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }this is showing the title on mobile – but not changing the background color. i’ve been trying unsuccessfully to sort this, can I use :active with :before ?
can’t seem to get this to work no matter what i do – help?i’ve even tried this
#top a .grid-image.avia-hover-fx:active {background:#1d2553!important;}
while i’m here should the rule go inside, or outside of a media query – given this is only mobile we’re targeting, i’d have thought inside – is that correct?hi Ismael,
almost…
here are the styles i’ve used to get the overlay (i added a custom class – .thoughts).thoughts span.image-overlay:hover {background:#1d2553;} .thoughts span.image-overlay-inside {display:none;} #top .thoughts h3 a {font-weight:normal;color:#ffffff;}if you hover over the image, only the top 30% triggers the background color, the bottom 70% triggers the title – but no background color change.
also, is there any way to center the title vertically better?
i works well with 2 lines, but not so great with just a single line. not a biggie, but i know the client will ask – so it’d be good to let them know it’s not simple to do so.
thanks heaps,
Jasonhi there,
bnewburger’s solution would do the trick, but his code throws me an error.
can someone please check it (i’m not a programmer) or, if there is a better solution out there now, can someone please let me know?
many thanks,
JasonOk, so I’ve tried various approaches mentioned here, but I’m still having no luck (I’m obviously an amateur). I’m going to see if a friend with a little more PHP knowledge can help me out. Guenni007 – if you’re still interested in taking a look I’ll happily give you admin access.
Apologies for the lack of response, I’ve been flat out on other projects. I’ll revisit today & report back.
Hi Victoria,
Yes, odd how the excerpt isn’t in the HTML, I’ll revisit that other thread & look a little closely at it.
Will report back.
Thanks,
JasonHi Victoria,
I’ve kind of already got this, as you can see above i’m not displaying anything below the grid image – but on top of it, on hover. i already have the title appearing, & have title & excerpt selected via the grid options, plus I have added an excerpt to the post, but it’s not displaying the excerpt – only the title.
here’s the css i’ve used (found on another thread here):/* Portfolio overlay with title - disable default animation */ #top .grid-entry a:hover .image-overlay .image-overlay-inside { animation:none; } /* Portfolio overlay with title - overlay */ #top .grid-entry .image-overlay .image-overlay-inside:before { content:''; position:absolute; background:#1d2553; /* blue */ height:100%; width:100%; border-radius:0; top:0; left:0; margin:0; } /* Portfolio overlay with title - remove default title below */ .grid-content .avia-arrow,#top .grid-entry .grid-content { display:none; } /* Portfolio overlay with title - display title on hover*/ .grid-entry a:hover:before { content:attr(title); position:absolute; width:100%; z-index:1000; text-align:center; opacity:1; font-size:18px; color:#fff!important; transform:translateY(-50%); animation:avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275)!important; top:50%; padding:0!important; display:flex!important; align-items:center; justify-content:center; } .avia_transform a:hover .image-overlay { opacity:1!important; }so i want the excerpt to appear below the title.
Hi Victoria, this just seems to hide part of the existing left/right arrows.
I want to completely remove them & have them as plain text links below the post – as explained above.
Can you help me with that?hi Victoria, links sent to you privately.
what i’m wanting is previous (text link) on the left, next (text link) on the right, below the meta, but above the share (for example).
i’ve also attached a
of my blog setup.hi Guenni007, that sounds great – but it’s a development site, so i don’t really want to publish publicly – can i provide to you more privately?
Hi Victoria,
I’m not sure what page you’re talking about as I didn’t link to one(?)
In any case, I’ll provide a link to this page in the private content area for you now.
Thanks :)Ok, so I’ve made some progress with this
by amending the following to:.grid-entry a:hover:before { content: attr(title); position: absolute; width: 100%; z-index: 1000; text-align: center; opacity: 1; font-size: 18px; color: #ffffff !important; transform: translateY(-50%); animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important; top: 50%; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; }Final piece of the puzzle for me, is to get the excerpt in there, below the title – any ideas anyone?
