Hover states

I Need Help
1

Hi, can anyone let me know if you can do similar hover states to these please https://www.graphicalhouse.com/

Slight image grow, dark overlay and text fade on.

Thanks
Kev

2

I am not 100% sure if his bric will work 100% the same way, but I am sure this can do what you are looking for from @Whittfield, if not - will do something better. His Card designer bric has loads of options and might be able to get this to do what you are looking for.

He has an offer on right now too which is worth grabbing while its hot!

3 Likes
3

You can do that with some custom css too.

1 Like
4

Hi @pumpkin,
cheers. Do you know where I could get this, or would it need to be written?

Thanks

1 Like
5

You can do that with:

3 Likes
6

I think the Image Overlay bric is closer to the exact thing you want as Peaclo mentioned.

I do think something really slick could be done with Card Designer though if you have it.

Today is a bad day for me to promise anything but just for fun I’ll see how close I can get :smile:

1 Like
7

And sure easier than using code :wink:

2 Likes
9

That’d need to be written, but as already pointed out by @Pealco, you seem to can do that with the Image Overlay Bric from @Norm. Can’t say since I don’t have that bric.

1 Like
10

The only thing is the zoom in the image but the rest is ok…

1 Like
11

Phew, took me a while searching and trying stuff, but here’s what I came up with:

https://fynndesign.de/test/

Blocs project here: test.bloc (1.4 MB)

I gave bloc-1 and bloc-2 a class (bg-1 and bg-2) to assign a background image to the full screen blocs via the class editor. The .text class is applied to the rows (column works too) and assigns a white text color and sets the z-index to 999 (otherwise the text would suffer from the dark overlay - 1 would’ve been enough, but better safe than sorry)

The rest is in the code editor (window → code editor):

<style>

/*
	darken overlay on hover over the bg-image(s)
*/


.bg-1,
.bg-2 {
	transition: 1s ease;
}


.bg-1:after,
.bg-2:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    transition: 1s ease;
    top: 0;
    left: 0;
    position: absolute;
}

.bg-1:hover:after,
.bg-2:hover:after {
    opacity: 1;
}


/*
	text animation and fade-in
*/


.text {
  transition: 1s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
}

#bloc-1:hover .text,
#bloc-2:hover .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  transition: 1s ease;
  opacity: 1;
}

Adding more blocs with the same effect requires to add more full screen blocs with separate classes for the backgrounds and then adding those bloc ids (#bloc-1 etc.) and classes to the code editor, as well as using the .text class on the rows or columns you use the text in.

I hope that works for you. Didn’t get the scale to work though, but I’m sure one of the more css savvy people here have a solution for that.

Cheers,
Fynn

4 Likes
12

Hey @Stubbsy,

Sorry the video is a little long, and I had some audio issues. But here is how I would build something like that in Blocs 4.

I used a slightly different approach to @pumpkin, he used Pseudo elements, I stuck with Div’s. I have done hovers both ways and you get similar results. Using Divs allows for some different effects I will do follow up videos on at a later date.

8 Likes
13

@PeteSharp That‘s of course so much smarter than what I did. Admitted, I‘m a css beginner but learned a lot while going the uber complicated way, trying stuff, copy and paste code without even knowing much about the :after pseudo class. :eyes:

And I guess your solution will make it even easier to work with on mobile devices, where mouseover does not work.

I wouldn’t have swapped the margin-top: 0 with the margin-top: -40 though, but instead just changed -40 to 40 to leave the text vertically centered after the animation.

Thanks a lot for the video. All makes perfect sense and I learned a lot from you yet again.

Looking forward to your course, especially the css master one :grin:

3 Likes
14

Thanks @pumpkin,

Yeah, I confused myself for a moment there. I probably would change it too REM instead of PX too. In saying that I think I like the text sitting slightly higher than centre.

Thats the problem I found with making these videos… things I would change later :rofl:

Keep it up though, helping solve problems does develop the skills.

3 Likes
15

Thanks for the responses all, I’ll have a gander through these later. Cheers

1 Like
16

Hi Malachiman – Thank you for the video, I really appreciate the level of detail you provide and the pace of your teaching style–very clear to listen to.

However, as a non-coder using Blocs, I’m not sure how to make good use of your videos when you’re using so much coding with blocs? I’m looking forward to your BlocsBuilder 4 tutorials going live, too…any ETA on that? Will your BlocBuilder 4 tutorials be focused on coders or non-coders? And if coding is used, will you provide beginner info when you do so that it makes sense to newbies?

And so, is there a way to do this very same ‘hover’ effect without code in blocs?

Thanks again!

3 Likes
17

Hi @DanielF, the best way to understand Blocs without zero coding are the courses of @Eldar (https://blocsmaster.com) I’m using Blocs for over 3 years now and purchased the Blocs 4 course from Eldar and, again, I learned countless new tricks with Blocs which I didn’t knew about. From here I can’t wait for @PeteSharp courses to get me up to speed in Bootstrap. I’ve been getting my head around Bootstrap only recently and, funny enough, its a kind of addictive as possibilities are endless.

3 Likes
18

HI Jerry – Thanks. I’ve been using blocs since Blocs2, and I completely agree and support Eldar’s courses, they have been highly useful. I’m looking forward to Malachiman’s videos, as the sampling I’ve viewed thus far show he has a wonderful teaching style. I’ve explored coding a bit, but since I’m not a website professional, and only need to build my own website and enjoy being able to do so since Adobe Golive, to Muse, and more recently Blocs, diving deeper into code is really not something that makes sense due to the infrequency in which I would be using it and therefore how quickly I would forget the details in order to be able to manage it. Thanks for you reply!

2 Likes
19

Hey @DanielF, good questions.

I understand that. The first course I am working on will lean towards non-coders. Blocs 4 has a lot more options in the Class Editor than 3 had - which is excellent. (anything I code will be well explained)

Since I am starting the whole thing from scratch, I hope you can appreciate it takes a while to pull it all together. I don’t have an ETA just yet. It became a much bigger adventure than I anticipated :wink: But it will be worth it.

You can for the most part, the only thing missing is the transitions (rather important part). So you would end up having to still add the CSS in the page header… or it will be jerky like early on in the video.

As I mention in the video briefly, the reason why I put the opacity in the page header and not in the class editor (which we can do with Blocs4 now) is that the starting state is 0, which means you wont be able to see it in the canvas.

3 Likes
20

Thanks for the reply…Truly looking forward to your videos…! I’m sure they will be high quality and worth the wait :pray:t3:

2 Likes
21

Thanks @PeteSharp, that’s ace mate.

If I wanted to add a sub header and make the text a click through to another page, is that easy enough to do?

Cheers