CSS Basic :hover

Question

Can someone point out why the hover not working? I managed to add the background images to each the anchor elements. However, the code looks redundant but if I try to move the background-size:cover, background-position: right top and background-origin: content-box to the .menu-item class it just stops working. Also at the bottom of the CSS, there is a #ID:hover that doesn't seem to work and I have no clue why, any tips are appreciated :)

#thumb-services {
  width: 100%;
  height: 250px;
}

.menu-item {
  width: 24%;
  height: 100%;
  position: relative;
  float: left;
  margin: 0 0.66666667%;
  cursor: pointer;
}

#thumb-services > a:last-child {
  margin-right: 0;
  float: right;
}

#thumb-services > a:first-child {
  margin-left: 0;
}

#tratamento-imagem {
  background: url('http://lorempixel.com/100/200/sports/1/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#portfolio {
  background: url('http://lorempixel.com/100/200/sports/2/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#fotografia {
  background: url('http://lorempixel.com/100/200/sports/3/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#montagem {
  background: url('http://lorempixel.com/100/200/sports/4/') no-repeat;
  background-size:cover;
  background-position: right top;
  background-origin: content-box;
}

#tratamento-imagem:hover {
  background: red;
}

<nav id="thumb-services">
  <a id="tratamento-imagem" class="menu-item"></a>
  <a id="portfolio" class="menu-item"></a>
  <a id="fotografia" class="menu-item"></a>
  <a id="montagem" class="menu-item"></a>    
</nav>

How is it not working? It looks fine to me. codepen.io/anon/pen/NqELGE — itzmurd4
– itzmurd4, Commented Jul 29, 2015 at 21:53
@AlexandreKrabbe you should accept the answer that was upvoted by clicking the checkbox beside it (hover bside the answer and it will appear). If you haven't already upvoted it, time you did. /you have enough rep now. — Rachel Gallen
– Rachel Gallen, Commented Jul 29, 2015 at 23:22

DRD · Accepted Answer · 2015-07-29 23:28:24Z

2

You can also accomplish hovering effect using pseudo-elements: http://jsfiddle.net/mu20eLd1/. (Note: I've restructured some of your code).

HTML:

<nav id="thumb-services">
    <a></a>  
    <a></a>  
    <a></a>  
    <a></a>
</nav>

CSS:

#thumb-services {
    height: 250px;
}

#thumb-services > a {
    width: 24%;
    height: 100%;
    float: left;
    cursor: pointer;
    position: relative;
    background: url('http://lorempixel.com/100/200/sports/1/') no-repeat top left/cover;
}

#thumb-services > a + a {
    margin-left: 1.32%;
}


#thumb-services > a:nth-of-type(2) {
    background-image: url('http://lorempixel.com/100/200/sports/2/');
}

#thumb-services > a:nth-of-type(3) {
    background-image: url('http://lorempixel.com/100/200/sports/3/');
}

#thumb-services > a:nth-of-type(4) {
    background-image: url('http://lorempixel.com/100/200/sports/4/');
}

#thumb-services > a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(0, 10%, 20%, 0.7);
    display: none;
}

#thumb-services > a:hover:before {
    display: block;
}

edited Jul 29, 2015 at 23:28

answered Jul 29, 2015 at 22:25

DRD

5,84318 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AndrewHipp Over a year ago

I wouldn't recommend this technique since it requires a ton of code where images are set by css. It's not scaleable.

DRD Over a year ago

If viewport of the solution is shrunk or widened, the links get resized and the images change as well, but the images remain to scale, because of the background-size: cover declaration. It will be a lot tougher to accomplish the same functionality with the img tag. Besides the post is about two things: 1) eliminating redundancies in the code and 2) hovering effects. And, there is absolutely nothing wrong with background image placement. It's a great technique and is quite appropriate in this case.

AndrewHipp Over a year ago

Apologies, you are correct sir. I only saw his hover effect needs and failed to realize his specific layout needs which his code points to. Upvoted.

AndrewHipp · Accepted Answer · 2015-07-29 22:05:36Z

1

Rather than loading the images as backgrounds, just put them on the page and fade them out.

.menu-item:hover img {
    opacity: 0;
}

Here's an example

answered Jul 29, 2015 at 22:05

AndrewHipp

4073 silver badges6 bronze badges

1 Comment

Alexandre Krabbe Over a year ago

This is very interesting, I'm trying to create my first website from scratch.. will definitely keep this technique in mind. Thanks!

Collectives™ on Stack Overflow

CSS Basic :hover

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related