I have a particular page on my website (http://thefloodplains.com/TheFloodSharkMain.html) whereby I have 6 DIV boxes that I want to be clickable to take users to other areas of the site. So far I've been able to wrap the header text I have within the DIVs with links. However, I have been unable to wrap the DIVs, themselves, in links. Every time I put an a href="..." around the DIV boxes, nothing happens. This might have to do with the fact that images have been overlain on top of the DIVs, but I'm not exactly sure.
Additionally, since I want the DIVs to have links and be clickable, I would like them to fade a certain color (with translucent opacity) when hovered over. Basically, I want the boxes on this page to act the exact same as they do on my front page: .
What makes this hard is that I'm positioning it in a different area of the page, and the original code doesn't seem to work in this case. I've tried most everything I can think of without having to entirely retry and tear down all the code I've been using. As it stands, I cannot get the hover actions or links around the DIVs to react at all.
The code I have been working with to fade each DIV to a specified color (in this case an orange-yellow shade) looks like this:
.block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
}
Here's the overall CSS I'm working with
h2 {
padding-bottom: 20px;
font-size: 40px;
margin-bottom: 10px;
color:#FF8B6F;
text-decoration-color: #FF8B6F;
}
h4.shoe {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #00A5D1;
color: #00A5D1;
}
a {
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
border-bottom: 1px dashed #FF8B6F;
text-decoration: none;
}
u {
border-bottom: 1px dashed #00A5D1;
text-decoration: none;
}
u:hover {
Color: #FF8B6F;
border-bottom: solid 2px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
padding-top: 15px;
}
.block {
flex: 0 0 33.1%;
height: 300px;
background-color: #00A5D1;
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
/* .block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
} */
x {
margin: auto;
text-align: center;
font-size: 85px;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
padding: 6px;
margin: 6px;
text-decoration-color:#00A5D1;
color:#00A5D1;
border-bottom: 2px solid #FFE097;
}
hr {
border: none;
height: 2px;
color: black;
background-color: #FFE097;
margin-bottom: 33px;
}
p {
color: black;
text-align: left;
width: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Buenard', Garamond, 'EB Garamond';
}
hr.two {
margin-bottom: 16px;
}
ul {
padding-bottom: 0px;
margin-bottom: 6px;
padding-top: 12px;
}
br {
padding-bottom: 6px;
}
li.pad {
padding-bottom: 6px;
margin-bottom: 6px;
}
div {
color: #00A5D1;
padding-top: 14px;
}
df {
text-decoration: inherit;
text-decoration: none;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
a.none {
text-decoration: none;
}
.blockx {
background-image: url('DownloadMusic2.png');
}
.blockx:hover {
background-color: #FFE097;
}
.blockx:after {
display: block;
background: #FFE097;
opacity: 0;
}
.blockx:hover:after {
opacity: .5;
}
.blocky {
background-image: url('EPKIcon2.png');
background-position: center center;
}
.blocky:hover {
background-color: #FFE097;
}
.blockz {
background-image: url('StreamAudio.png');
}
.blocka {
background-image: url('VideoStream.png');
background-position: center center;
}
.blockb {
background-image: url('ContactIcon.png');
}
.blockc {
background-image: url('Handshake2.png');
}
And here is the HTML of the web page:
<body>
<a class="btn" href="http://thefloodplains.com/"></a>
<center><x>The FloodShark</x></center>
<br>
<center><df href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo.jpg" style="text-decoration: none;"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo-1024x585.jpg" style="margin-top: 0px; margin-bottom: 2px; padding-bottom: 6px" alt="floodshark-cropped-william-luo" width="856" height="480" class="alignnone size-large wp-image-228" padding-bottom="2px;" /></img></df></center>
<hr>
<p><b>The FloodShark:</b> A Florida-based producer/composer turned carnivorous, fresh-water tolerant, cold-blooded, cartilaginous predator surfing the sonic waves with an eclectic musical style</p>
<center><div class="container flex-container">
<a href="TheFloodSharkDownloads.html" title="Free downloads of The FloodShark's discography"><div class="block blockx"><a href="TheFloodSharkDownloads.html"><h4 class='shoe'><u>Downloads</u></h4></a></div></a>
<a href="EPK.html" title="EPK"><div class="block blocky"><a href="EPK.html"><h4 class='shoe'><u>EPK</u></h4></a></div></a>
<div class="block blockz"><a href=""><h4 class='shoe'><u>Stream Audio</u></h4></a></div>
<div class="block blocka"><a href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos"><h4 class='shoe'><u>Stream Video</u></h4></a></div>
<div class="block blockb"><a href="Contact-Social.html"><h4 class='shoe'><u>Contact</u></h4></a></div>
<div class="block blockc"><a href="Contribute-Support.html"><h4 class='shoe'><u>Contribute / Support</u></h4></a></div>
</div></center>
<br>
</body>
So basically I want to be able to use the boxes as is, but I would like to make it so that the entire DIV box for each box is a link, as well as fades to a shade of a specified color when hovered over. Thank you in advance for any and all advice!
Try this html markup. Donot try to add anchors inside anchor ! it doesn't work. Also you have missed styles for hover on blockz, blocka, blockb and blockc. That is why no hover effect is shoeing on them. See updated fiddle https://jsfiddle.net/owvs550p/4/
<a class="btn" href="http://thefloodplains.com/"></a>
<center>
<x>The FloodShark</x>
</center>
<br>
<center>
<df href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo.jpg" style="text-decoration: none;"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo-1024x585.jpg" style="width:100%;margin-top: 0px; margin-bottom: 2px; padding-bottom: 6px" alt="floodshark-cropped-william-luo" width="856" height="480" class="alignnone size-large wp-image-228" padding-bottom="2px;" /></img>
</df>
</center>
<hr>
<p><b>The FloodShark:</b> A Florida-based producer/composer turned carnivorous, fresh-water tolerant, cold-blooded, cartilaginous predator surfing the sonic waves with an eclectic musical style</p>
<center>
<div class="container flex-container">
<a href="TheFloodSharkDownloads.html" class="block" title="Free downloads of The FloodShark's discography">
<div class="block blockx">
<h4 class='shoe'><u>Downloads</u></h4>
</div>
</a>
<a href="EPK.html" class="block" title="EPK">
<div class="block blocky">
<h4 class='shoe'><u>EPK</u></h4>
</div>
</a>
<a href="" class="block">
<div class="block blockz">
<h4 class='shoe'><u>Stream Audio</u></h4>
</div>
</a>
<a class="block" href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos">
<div class="block blocka">
<h4 class='shoe'><u>Stream Video</u></h4>
</div>
</a>
<a href="Contact-Social.html" class="block">
<div class="block blockb">
<h4 class='shoe'><u>Contact</u></h4>
</div>
</a>
<a href="Contribute-Support.html" class="block">
<div class="block blockc">
<h4 class='shoe'><u>Contribute / Support</u></h4>
</div>
</a>
</div>
</center>
<br>
CSS
h2 {
padding-bottom: 20px;
font-size: 40px;
margin-bottom: 10px;
color:#FF8B6F;
text-decoration-color: #FF8B6F;
}
h4.shoe {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #00A5D1;
color: #00A5D1;
}
a {
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
border-bottom: 1px dashed #FF8B6F;
text-decoration: none;
}
u {
border-bottom: 1px dashed #00A5D1;
text-decoration: none;
}
u:hover {
Color: #FF8B6F;
border-bottom: solid 2px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
padding-top: 15px;
}
.block {
flex: 0 0 33.1%;
height: 300px;
background-color: #9100ff;
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
/* .block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
} */
x {
margin: auto;
text-align: center;
font-size: 85px;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
padding: 6px;
margin: 6px;
text-decoration-color:#00A5D1;
color:#00A5D1;
border-bottom: 2px solid #FFE097;
}
hr {
border: none;
height: 2px;
color: black;
background-color: #FFE097;
margin-bottom: 33px;
}
p {
color: black;
text-align: left;
width: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Buenard', Garamond, 'EB Garamond';
}
hr.two {
margin-bottom: 16px;
}
ul {
padding-bottom: 0px;
margin-bottom: 6px;
padding-top: 12px;
}
br {
padding-bottom: 6px;
}
li.pad {
padding-bottom: 6px;
margin-bottom: 6px;
}
div {
color: #00A5D1;
padding-top: 14px;
}
df {
text-decoration: inherit;
text-decoration: none;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
a.none {
text-decoration: none;
}
.blockx {
background-image: url('DownloadMusic2.png');
}
.blockx:hover {
background-color: #FFE097;
}
.blockx:after {
display: block;
background: #FFE097;
opacity: 0;
}
.blockx:hover:after {
opacity: .5;
}
.blocky {
background-image: url('EPKIcon2.png');
background-position: center center;
}
.blocky:hover {
background-color: #FFE097;
}
.blockz {
background-image: url('StreamAudio.png');
}
.blocka {
background-image: url('VideoStream.png');
background-position: center center;
}
.blockb {
background-image: url('ContactIcon.png');
}
.blockc {
background-image: url('Handshake2.png');
}
EDIT
Add the following styles for the hover effect to work properly
.block {
position: relative;
}
.block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: 0.5;
}