Add Shadow Effect on Hover to DIV boxes - html

Question

I'm currently trying to figure out a way to make it so that upon hovering over each separate box on the front page of my website (http://thefloodplains.com/), a shadow animation occurs for that specific box. I want it to look very similar to what can be found at this page: http://tobiasahlin.com/blog/how-to-animate-box-shadow/. I've used this page as a guide in an attempt to set up a hover shadow effect.
Here's the CSS/HTML specifically for the div boxes on my web page (http://thefloodplains.com/):
.col-md-4 {
color:#00A5D1;
height:300px;
}
.col-md-3 {
color:#00A5D1;
height:300px;
box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover {
background-color: #FFE097;
}
.col-md-3:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.col-md-4 h3 {
position: relative;
top: 40%;
transform: translateY(-50%);
}
.col-md-4 {
color:#00A5D1;
height:300px;
border: 1px solid #FF8B6F;
position: relative;
}
.col-md-3 {
height:300px;
position: relative;
}
.col-md-4:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.col-md-3:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.col-md-4:hover:after {
opacity: .5;
}
.col-md-3:hover:after {
opacity: 1;
}
.col-md-4 h3 {
position: relative;
z-index: 1;
top: 40%;
transform: translateY(-50%);
}
Anything with the class ".col-md-3" is where I have attempted to add in the hover-shadow effects (in much the same way that I already have the current hover-color effects set up). The following code is the rest of the CSS/HTML of my front page:
<style>
h3 {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}
img {
max-width: 100%;
max-height: 100%;
}
#div1 {
background-image: url('AboutIcon.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div2 {
background-image: url('ArticlesIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div3 {
background-image: url('CodingBrackets2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div4 {
background-image: url('ContactIcon.png');
background-position: center center; //center the image in the div
background-size: contain; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div5 {
background-image: url('FSMusicArt.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div6 {
background-image: url('AudioProduction4.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div7 {
background-image: url('Violin3.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div8 {
background-image: url('GalleryImage2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
#div9 {
background-image: url('Handshake2.png');
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
background-repeat: no-repeat;
background-size: 100%;
}
div {
background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
background-position: center center; //center the image in the div
background-size: cover; //cover the entire div
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<a href="About.html" title="About the site and Author"><div class="col-md-4" id='div1'>
<h3>About</h3>
</div></a>
<a href="Articles.html" title="Original Articles and Content"><div class="col-md-4" id='div2'>
<h3>Articles</h3>
</div>
<a href="CodingCorner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4" id="div3">
<h3>Coding Corner</h3>
</div></a>
</div>
<div class="row">
<a href="Contact-Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4" id="div4">
<h3>Contact & Social</h3>
</div></a>
<a href="TheFloodSharkMain.html" title="The FloodShark Music and Media"><div class="col-md-4" id="div5">
<h3>
The FloodShark
Music
</h3>
</div></a>
<a href="FloodplainProductions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4" id="div6">
<h3>Floodplain Productions</h3>
</div></a>
</div>
<div class="row">
<a href="ClassicalCorner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4" id="div7">
<h3>Classical Corner</h3>
</div></a>
<a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4" id="div8">
<h3>Gallery</h3>
</div></a>
<a href="Contribute-Support.html" title="Contribute to The Floodplains!"><div class="col-md-4" id="div9">
<h3>Contribute / Support</h3>
</div></a>
</div>
</div>
</body>
I tried adding "col-md-3" to the div's as a second class in the above code along with "col-md-4," which controls the color hover effect. The problem is, I don't think this method works, but I'm not really sure what does. As of right now, I'm using the "col-md-4" color hover effect - which is working - but getting a shadow effect to work simultaneously is something I have yet to figure out.
So currently - upon hovering - the boxes turn to that transparent shade of orange/yellow. Is there a way that I can get the shadow animation AND the color-change hovers to work together at the same time? So basically I just need a hover animation added to what is already here at http://thefloodplains.com/.
Thank you in advance for your time.

Answer 1

Create a new class for the effect i.e. hovernow add the following code:
body {
background-color: white;
}
.hovernow {
background-color: red;
width: 100px;
height: 100px;
margin: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.3s ease-in-out;
}
.hovernow:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}
<div class="hovernow">
</div>
Then add this class .hovernow to the div's which you like the hover effect to apply to.

Answer 2

Are you looking for this, Fiddle
I have added the style for .col-md-4. Please check the code...