Change content on hovering, only by CSS

Question

I have seen many different ways to resolve the following, but it does not work quite as I hoped...

I need to make a div (main div) with severel divs inside (item-divs).

Each item-div must show a different picture, but when I hover a certain picture, this picture should be hidden and a text showen instead - in the same div.

How on earth can I make this?

What have you tried so far? Show your current HTML and CSS code and tell us what works and don't in your code :) — versvs, Jun 27 '14 at 07:56
You need to add an image or sample markup of what you have and how you want the end result to show up. What you're explaining can be done via the CSS `:hover` pseudo element, have you tried that? — JohnP, Jun 27 '14 at 07:56
Possible duplicate off http://stackoverflow.com/questions/14149360/text-on-image-mouseover — web-tiki, Jun 27 '14 at 08:00

josh.gaby · Answer 1 · 2014-06-27T08:38:07.807

You can do this with the CSS pseudo element :hover

See example: http://jsbin.com/vijawuda/1/edit?html,css,output

HTML Markup:

   <div class='outer-container'>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 1
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 2
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 3
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 4
      </div>
    </div>
    <div class='image-holder'>
      <img src='' />
      <div class='text'>
          Test image 5
      </div>
    </div>
  </div>

CSS

.image-holder {
  width: 150px;
  height: 150px;
  display: inline-block;
}

.image-holder > .text {
  visibility: hidden;
  width: 150px;
  height: 150px;
}

.image-holder:hover img {
  visibility: hidden;
}

.image-holder:hover .text {
  visibility: visible;
}

You might want to consider going into more detail in your answer and not rely on a link so much. This is as the link could stop working and then your answer wouldn't be so useful anymore. — AndrewPolland, Jun 27 '14 at 08:30

score 0 · Answer 2 · answered Jun 27 '14 at 08:14

For example this variant:

<div class="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

And your css chould be:

.wrap:hover > child2{
    opacity: 0;
}

But static styles should be like this:

.wrap{
    width: 200px;
    height: 300px; /* maybe auto if you want */
    position: relative;
}

.child1{
    width: 100%;
    height: 100%;
    background: lightgreen;
}

.child2{
    width: 100%;
    height: 100%;
    background: #ff3030; /* surely for example */
    position: absolute;
    top: 0;
    left: 0;
}

/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */

midstack · Answer 3 · 2014-06-27T08:49:17.133

HTML

<div class="main">
    <div class="content">
        <div class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
    <div class="content">
        <div  class="maincontent">
            <img src="http://lorempixel.com/150/150/" alt="" height="150" width="150" />
        </div>
        <div>Hovering Content</div>
    </div>
</div>

CSS

.main {
    width: 1000px;
    height: 200px;
}

.content {
   width: 150px;
    height: 150px;
    background-color:#c80000;
    color:#fff;
    font-family:arial;
    text-align:center;
    float:left;
    margin-left: 10px;
    font-size: 20px;
    cursor:pointer;
}

.content > div.maincontent + div {
    display:none;
    padding-top:50px;
}

.content:hover > div.maincontent {
    display:none;
}

.content:hover > div.maincontent + div {
    display:block;
}

http://jsfiddle.net/q92zL/4/

Change content on hovering, only by CSS

3 Answers3