Access menu on image only using css

Question

<div class = "woman">
            <div class = "container">
                  <img src = "https://i.imgur.com/BCGiTk3.jpg">
                  <div class = "item-desc">
                        <span>$49</span>
                        <span>Fluted hem dress</span>
                        <span>Summer Dress</span>
                  </div>
                  <div class = "message">
                        <span>Sizes</span>
                        <span>XS, S, M, L, XL, XXL</span>
                  </div>

                  <div class = "checkout">
                      <button class = "add btn">Add to cart</button>
                      <button class = "view btn">View Cart</button>
                  </div>
            </div>
      </div>

I have 2 problems.

1. When the page initially loads, the div I have hidden is shown first and then hidden. (The .message div)

2. When I hover over the image, the menu I want shown is visible BUT disappears once I hover over the menu. How can I get it to stay?

Please note:

I already achieved what I wanted in Javascript but i'm experimenting to see if it's possible in CSS only.

JSFiddle: https://jsfiddle.net/L3pt599b/

Answer 1

To keep the menu visible, you can add the following selector:

.checkout:hover button.btn {
  visibility: visible;
}

I could not reproduce the problem where a div is shown when the page loads. Perhaps adding overflow:hidden to .woman > .container might help.

Here's a snippet:

 * { margin: 0; padding: 0; font-family: "Open Sans"; } .right { float: right; } .woman { position: relative; } .woman>.container { margin: 30px 30px; width: 333px; height: 466px; background: yellow; position: relative; overflow: hidden; } .woman>.container>img { width: 333px; } .woman>.container>.item-desc { position: absolute; /*bottom: 100px;*/ bottom: 0px; height: 80px; width: 100%; background: #FFF; transition: bottom 200ms ease-out; } .woman>.container>.message { position: absolute; bottom: -100px; height: 100px; width: 100%; background: #FFF; transition: all 200ms ease-out; visibility: hidden; } .woman>.container>div:nth-child(2) span:first-child { color: #5ff7d2; font-size: 22px; float: right; text-transform: uppercase; font-weight: bold; position: relative; right: 20px; top: 20px; } .woman>.container>div:nth-child(2) span:nth-child(2) { color: #000; font-size: 16px; text-transform: uppercase; font-weight: bold; display: block; margin: 20px 0px 0px 25px; } .woman>.container>div span:last-child { color: #b1b1b3; font-size: 14px; text-transform: uppercase; display: block; margin: 0px 0px 0px 25px; } .woman>.container>div:nth-child(3) span:first-child { position: relative; text-transform: uppercase; color: #000; font-size: 16px; text-transform: uppercase; display: block; left: 25px; font-weight: bold; } .woman>.container>div:nth-child(3) span:last-child { display: block; position: relative; left: 0; color: #b1b1b3; font-size: 14px; text-transform: uppercase; } .woman>.container>img:hover+.item-desc~.message { bottom: 0px; visibility: visible; transition: all 200ms ease-out; } .woman>.container>img:hover~.item-desc { bottom: 100px; transition: all 200ms ease-out; } .checkout { position: absolute; left: 120px; top: 80px; z-index: 1; } button.btn { text-transform: uppercase; background: transparent; border: 2px solid #fff; width: 165px; height: 45px; text-align: center; color: #FFF; font-size: 15px; font-weight: bold; display: block; margin-bottom: 20px; z-index: 1; visibility: hidden; } .woman>.container>img:hover~.checkout button.btn { visibility: visible; } .checkout:hover button.btn { visibility: visible; }

 <div class="woman"> <div class="container"> <img src="https://i.imgur.com/BCGiTk3.jpg"> <div class="item-desc"> <span>$49</span> <span>Fluted hem dress</span> <span>Summer Dress</span> </div> <div class="message"> <span>Sizes</span> <span>XS, S, M, L, XL, XXL</span> </div> <div class="checkout"> <button class="add btn">Add to cart</button> <button class="view btn">View Cart</button> </div> </div> </div>

Answer 2

I always use the

nav

tag. Il send you the css for it.

nav ul{
list-style-type: none;
background-color: #b577b5;
border: 4px solid #111111;
border-radius: 10px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}

you can customize it if you want.

Answer 3

Change lines 131-133 of your CSS to this:

.woman:hover > .container > img ~ .checkout button.btn{
    visibility: visible;
}

This is instead of:

.woman > .container > img:hover ~ .checkout button.btn

The reason for this is that when you hover on the buttons on the img, you are no longer hovering on the img (you are hovering over the buttons instead)

See below:

 *{ margin: 0; padding: 0; font-family: "Open Sans"; } .right{ float: right; } .woman{ position: relative; } .woman > .container{ margin: 30px 30px; width: 333px; height: 466px; background:yellow; position: relative; } .woman > .container > img{ width:333px; } .woman > .container > .item-desc{ position: absolute; /*bottom: 100px;*/ bottom: 0px; height: 80px; width: 100%; background:#FFF; transition: bottom 200ms ease-out; } .woman > .container > .message{ position: absolute; bottom: -100px; height: 100px; width: 100%; background:#FFF; transition: all 200ms ease-out; visibility: hidden; } .woman > .container > div:nth-child(2) span:first-child{ color: #5ff7d2; font-size: 22px; float: right; text-transform: uppercase; font-weight: bold; position: relative; right: 20px; top: 20px; } .woman > .container > div:nth-child(2) span:nth-child(2){ color:#000; font-size: 16px; text-transform: uppercase; font-weight: bold; display: block; margin: 20px 0px 0px 25px; } .woman > .container > div span:last-child{ color:#b1b1b3; font-size: 14px; text-transform: uppercase; display: block; margin: 0px 0px 0px 25px; } .woman > .container > div:nth-child(3) span:first-child{ position: relative; text-transform: uppercase; color:#000; font-size: 16px; text-transform: uppercase; display: block; left: 25px; font-weight: bold; } .woman > .container > div:nth-child(3) span:last-child{ display: block; position: relative; left: 0; color:#b1b1b3; font-size: 14px; text-transform: uppercase; } .woman > .container > img:hover + .item-desc ~ .message{ bottom: 0px; visibility: visible; transition: all 200ms ease-out; } .woman > .container > img:hover ~ .item-desc{ bottom: 100px; transition: all 200ms ease-out; } .checkout{ position: absolute; left: 120px; top: 80px; z-index: 1; } button.btn{ text-transform: uppercase; background:transparent; border: 2px solid #fff; width: 165px; height: 45px; text-align: center; color: #FFF; font-size: 15px; font-weight: bold; display: block; margin-bottom: 20px; z-index: 1; visibility: hidden; } .woman:hover > .container > img ~ .checkout button.btn{ visibility: visible; }

 <div class = "woman"> <div class = "container"> <img src = "https://i.imgur.com/BCGiTk3.jpg"> <div class = "item-desc"> <span>$49</span> <span>Fluted hem dress</span> <span>Summer Dress</span> </div> <div class = "message"> <span>Sizes</span> <span>XS, S, M, L, XL, XXL</span> </div> <div class = "checkout"> <button class = "add btn">Add to cart</button> <button class = "view btn">View Cart</button> </div> </div> </div>