Hover effect

Hi all,

I am looking for a hover effect for an image, a full over lay with some transparency in a selected colour of my choice - I require to able to put text in it.

Is this possible from the brics we have in? or some css?

This is an example of what im after : Caption Hover Animations

Cheers !

Hey @AdieJAM

Yes you can do this in blocs, you need to add some css to the page header for it to work.

This is how I do it.

Example project

Bloc_Text_Overlay_On_Hover_Example.bloc (720.6 KB)

4 Likes

BRILLIANT !!! Thank you so much ! I found an old link you posted, but this one is must better !!!

I can sleep well now ! thanks.

yes, I changed how I was doing this, and also make use of Flex which I didnt before.

2 Likes

There is actually a custom bric with various effects that does something similar, though it cannot choose the colour background beyond dark or light. Image Overlay | Blocs Store

1 Like

You can add any content when you build it yourself. That bric does have its uses though for sure.

@AdieJAM. if you wanted to do something with lower thirds and animated you can try this. Note for this to work the overlay div is nested into the main one.

Bloc_Text_Overlay_On_Hover_Example_Lower3rd.bloc (720.0 KB)

5 Likes

Thank you ! thats even better. i was hoping to use this in a card of some sort, i want hover with description on it, and under to have a basic header and button.

Ill dive into this more tomorrow - thank you @PeteSharp - amazing as always.

Same principle applies to a card. Its a pure CSS solution.

1 Like

That’s really nice! Why is this better than the Blocs store image-overlay? I’ll tell you why, as much as I like the image tools in the Blocs Store and I’ve used them many times is that you are not able to use the full list of interactions. You only get page link/URL link. What if I want the overlay image to open a modal?

I love the simplicity of the Blocs image overlay but @Norm it would be nice if these tools had the full list of interactions.

Thanks, again. I think this is worth the extra work.
Casey

1 Like

You could actually open a modal with the Image Overlay bric in the store. Modals use 2 attributes to trigger, but you can also use just 1 and a href.

So for the URL of the button add just the ID of your modal eg. #myModal

And then using a little script like this add the data-toggle attribute to the overlay-button.

<script>
document.querySelectorAll('.overlay-btn').forEach(function(button) {
 	(button.setAttribute("data-toggle", "modal" ));
});
</script>

This code would turn all of them into Modal buttons and each one can open a different modal. You can of course just target one of them to open the Modal.

I totally agree. @PeteSharp has really helped me/us all with these 2 posts. I can manage to get into the code too and change things in there a little to adapt it if need to.

But @casey1823 i do think Blocs 4 will be a huge change for us all, specially for those that would like quicker work out of the box with full list of options down the right side. I have been a huge campaigner for this.

The great thing is too that there are so many top people on here that can offer advice and help on things, I believe its all possible in Blocs - for someone like myself, i’m so used to seeing these options with it all built in. But with all these plugins/stacks this is what slows down websites and totally slows down the build of sites. I remember when i finished a site in Foundation in Rapidweaver, when i went from page to page to make a change, it would take me 3 minutes for a page to load!!! It was painful. And when @Flashman told me about Blocs it was like WOW! jesus this thing is FAST!
I do still get stuck on basic things (my head and eyes do like to see these things built in !) but help here is at hand.

Thanks, really good conversation.

Casey

Im sure this vanished from the Blocs store last week when I was looking!! It was not in the bric store…i checked a few times…im sure I did !

But as a charged Bric (which is fine) I would like have seen much more options in the side menu out of the box with colours, full editing options, speed etc this could be HUGE. @Norm = give it some love !

The Image Overlay Bric is really good, for a lot of reasons. You can use the inspector to see the classes you can make in the Class Manager to control the text and colours etc.

@AdieJAM. here is an example how you can easily customise the Bric

As you know I was working previously with Foundation in RW and it was capable in terms of features, albeit with help from third party stacks, but yes the lack of speed was just horrendous and became the primary reason I ditched RW for Blocs. In RW it would take 30 seconds to preview a page with an image or two and some text at desktop, then another 30 seconds at tablet etc. The same pages in Blocs would flick between breakpoints instantly.

Unlike Blocs you need to preview much more often in RW as well, so this becomes particularly painful. If I open up RW now the interface with a lot of those stacks is a complete mess of complication with functions that can often be achieved far more quickly at no cost in Blocs.

I think a key difference is that using Blocs actually teaches you a bit about web design, where I only felt like RW was teaching me how to use RW. The learning curve in Blocs is perhaps higher if you want to do more than the basics but overall I just find it a far more pleasant and productive place to spend my day.

The new version of Foundation is said to be faster and it’s probably very good but it took about five years to appear and I haven’t tried it. I find it a pain going back & forth between apps that work in such different ways, so I am sticking with Blocs.

1 Like

100% right, I had an old site where it was two pages. This had a a stack inside a stack inside another stack and that stack had a section stack and then had code on that section, and that was just the header ! and then the images below had several stacks - It was a page with around 8 sections and each section had around 5 stacks and some 2 areas had 10 stacks - it was a crazy site!!! and then had a contact page which I had separate. This became so painful to work on in the end that I nearly gave up. To whole screen would like massive screen of Russian dolls to make it work !! makes me cringe thinking of it. In the end I make it a 5 page site! ahhhh the good old days !

Thinking about it now, I could probably do 90% of this site out of the box on Blocs! and what took me 4 weeks of work, I could have done in a week on Blocs.

In RW every situation requires a stack and practically every stack requires a solution. It did get me started, however at this point I think the general direction of play is all in favour of Blocs.

1 Like

@PeteSharp I’ve been looking at different options for the overlay image. I was wondering if instead of opening a model would it be possible to just open a lightbox image?

Casey

Yes and no @casey1823

You can kind of do it, but Blocs isn’t really made for you too. I will PM you.

Hi @Malachiman
would it be possible to re-up your first film in this thread about changing the css in the page header?
Your Text_Overlay_Example file is exactly the solution I was searching for, but I would like to more understand it and change it a bit, instead of only using your file :slight_smile:

Thanks