Clickable Divs with hover action!

[jly]

Working off of something I found in this community not too long ago, I decided to modify it to create something that we needed and made it easy for anyone on our marketing team to create and update with ease—clickable divs!

Here are some live examples:

https://www.jibestream.com/corporate-wayfinding-solutions

https://www.jibestream.com/hotel-hospitality-mapping-solutions

Here is how I did it

Create a New Module

In "Design Manager", go to "File" on the left side bar and hit "New File". When you see a pop-up with options, select "Module". 

Set it up

From here, create it as a "Page Template", keep it as a "Local Module", give it a name and properly store it in your site folders

Set up the code

Under HTML + HUBL field, paste this code in:

<a href="{{ module.content_link }}">
 <div class="hub-cardbox">
 <div class="hubcardbox">
 <div class="cover"><img src="{{ widget.image_field.src }}" width="{{ widget.image_field.width }}" height="{{ widget.image_field.height }}" alt="{{ widget.image_field.alt }}"></div>
 <h2>{{ module.content_header }}</h2>
 <p>{{ module.content_body }}</p>
 </div>
 </div>
</a>

In the CSS field, paste this code in:

.hubcardbox {
 margin: 10px 5px 5px 15px;
 display: inline-block;
 vertical-align: middle;
}

.cover {
 position: relative;
 height: 200px;
 background-color: ;
 background-size: 120%;
 background-position: top;
 margin-top: -18px;
 margin-right: -12px;
 margin-bottom: 25px;
 margin-left: -22px;
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
 overflow: hidden;
}

.hubcardbox p{
 font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif;
 color: #555555;
 margin: 0;
 padding: 0px 0px 10px 0px;
 border: 0;
 outline: 0;
 background: 0 0;
 vertical-align: baseline;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
}

.hub-cardbox {
 padding: 7px; 
 border-radius: 6px;
 -webkit-box-shadow: 0px 7px 32px -7px rgba(0,0,0,0.15);
 -moz-box-shadow: 0px 7px 32px -7px rgba(0,0,0,0.15);
 box-shadow: 0px 7px 32px -7px rgba(0,0,0,0.15);
 transition: all 0.2s ease-in-out;
 vertical-align: middle;
 display: inline-block;
 width: 100%;
}

.hub-cardbox:hover{
 -webkit-box-shadow: 0px 7px 32px -7px rgba(0,0,0,0.31);
 -moz-box-shadow: 0px 7px 32px -7px rgba(0,0,0,0.31);
 box-shadow: 0px 7px 32px -7px rgba(0,0,0,0.31);
 transition: all 0.2s ease-in-out;
/* background-color: #e3e7ea; */
 }

Create your fields

On the right side menu, create your 4 fields:

1. image field (image)
2. content header (rich text)
3. content body (rich text)
4. content link (text)

This is what it looks like:

Et voila!

My next step is to add an option to allow for opening a link in a new window, so if someone has any ideas on how it might be possible, please share! 🙂

[jennysowyrda]

Thanks for sharing @jly! 

@tjoyce, @Jsum, @Anton, @dennisedson, @Designer_WOT I thought this was something you may be interested in!

[dennisedson]

@jly, looks very nice.  

for the open in new window, you can add a boolean and if checked, adds target="_blank" to your anchor. 

Another addition that you may consider which i find myself having to deal with a lot is making the items equal height.  Found that flex can do a lot of the grunt work for you.  Whipped up a quick pen that you can reference if helpful.  

Thanks for sharing!

[jly]

Oh my GOODNESS, THANK YOU!!! 

Before I get into the equal height issue that SO MANY people have bugged me about but wasn't on my priority list, but now is!

Can you tell me what I have to do in the Boolean field to link it back to the target="_blank" that I've added to the HMTL (to be honest, I don't even know if I did that part correct!)?

Here is what I've done so far:

[dennisedson · Accepted solution]

you are on your way.  give the boolean a name that is meaningful to editor, 

once you have the name to your liking, your code will look something like this:

<a href="{{ module.content_link }}" 
{% if module.boolean_field %}
	target= "_blank"
{% endif %} >

adjust the boolean module name to yours 🙂

If you want to take it to the next level, you should look into the repeater option for modules 🙂

[jly]

Thank you, thank you, thank you!

I looked into the repeater option for modules and can think of a few places to use them 😉

[shadesofmedia]

Hi Jly, I've one question how you've get these resourses have you added them statically? As i've tried the above method in one my blog templte to get resourses but i'm unsble to get this. please help me.

[dennisedson]

Well this is a blast from the past 😀

@shadesofmedia , what does your markup look like?  Pretty sure we can get that blog template fancied up to look like @jly 's lovely example!

[jly]

Yes, they are static unfortunately.