Paweł Trybus Paweł Trybus - 3 months ago 14
CSS Question

Image link, wider than image actually is

I have prepared layout of my website's footer and I wanted to do it the way I have imagined, but it turned out that it is not as easy as I thought.

Here is comic book with story about naughty link image that does not want to work properly:

Whole story

What I want to do with my code:


  1. I want to make
    <footer>
    at the bottom of the page.

  2. I fill
    <footer>
    with three flex boxes (
    <div>
    ), which distribution is 25% - 50% - 25%.

  3. Middle
    <div>
    contains image at the bottom center.

  4. Image contained in the middle
    <div>
    has to be a link via
    <a>
    .



What I thought my code will do:


  • When you click ONLY(!!!) an image you will activate a link.



What my code really does:


  • When I hover mouse anywhere in this middle
    <div>
    area (and this is a bit tricky!!) but ONLY anywhere from the bottom to image height (so ONLY lower half of middle
    <div>
    ). Link is also active at whole width of
    <div>
    which contains image. Blue area on picture below in link. You can also see this in the snippet.



I have CSS style and HTML codes as follows:



footer {
-webkit-box-flex: 1 100%;
-moz-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
flex: 1 100%;
height:200px;
width:400px;
background-color:black;
}
footer section {
margin: 0 auto;
width:90%;
height:200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
background-color:red;
}
.footerLogo{
-webkit-box-flex: 1 25%;
-moz-box-flex: 1 25%;
-webkit-flex: 1 25%;
-ms-flex: 1 25%;
flex: 1 25%;
order:1;
height:200px;
background-color:blue;
}
.footerGoUp{
-webkit-box-flex: 2 50%;
-moz-box-flex: 2 50%;
-webkit-flex: 2 50%;
-ms-flex: 2 50%;
flex: 2 50%;
order:2;
align-self:flex-end;
height:200px;
background-color:yellow;
}
.footerSocialLogos{
-webkit-box-flex: 1 25%;
-moz-box-flex: 1 25%;
-webkit-flex: 1 25%;
-ms-flex: 1 25%;
flex: 1 25%;
order:3;
height:200px;
background-color:blue;
}
div.asImage{
height:100px;
width:50px;
background-color:green;
margin:auto;
margin-top:100px;
}

<footer>
<section>
<div class="footerLogo">
</div>
<div class="footerGoUp">
<a href="#top">
<div class="asImage">
</div>
</a>
</div>
<div class="footerSocialLogos">
</div>
</section>
</footer>




Answer
.asImage { display: inline-block; }