Clickable Divs with hover action!

SOLVE
jly
Occasional Contributor

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!

 

Screen Shot 2018-11-20 at 10.53.37 AM.png

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". 

 

Screen Shot 2018-11-20 at 10.57.26 AM.png

 

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

Screen Shot 2018-11-20 at 11.00.33 AM.png

 

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:

Screen Shot 2018-11-20 at 11.03.42 AM.png

 

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! Smiley Happy

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor | Platinum Partner

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 Smiley Happy

 

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

dennis
5 Replies 5
Community Manager

Thanks for sharing @jly

 

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


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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!

 

dennis
Highlighted
jly
Occasional Contributor

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:

 

Screen Shot 2018-11-21 at 3.23.47 PM.png

Reply
0 Upvotes
Regular Advisor | Platinum Partner

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 Smiley Happy

 

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

dennis
jly
Occasional Contributor

Thank you, thank you, thank you!

 

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

Reply
0 Upvotes