Panel-Group Hover Change Img to another

Question

I start to work with Bootstrap, but I have a problem.
I have a Panel-Group and in this panel an image and a text.
Here comes the problem I want to change the image per hover to another image.
But it needs to change when the mouse goes in the panel and not on the image. I found many stuff to change the image when my mouse goes in the image, but not with the panel.

My Code:

.panel-body {
  background-color: RGB(203, 207, 208);
}

.panel-body p {
  margin-right: 20px;
}

.panel-body:hover {
  background-color: #6AA9DD;
  color: white;
}

.panel {
  min-width: 350px;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="col-xs-12 col-sm-6 col-lg-4">
  <a href="Dokumente/Vorlage/Template_Voiteq-SMILOG.dotm" downlaod="Template_Voiteq-SMILOG.dotm">
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-body">
          <table>
            <tr>
              <td><img id="defaultImg" src="img/folder.png" alt="folder" /><img id="HoverImg" src="img/folderHover.png" class="hide" alt="folder" /></td>
              <td>
                <p>Technische Dokumentation Formatvorlage Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

You didnt know what I want ask please :). Hope someone can help me out here.

Regards

You aren't setting your image in CSS, so using CSS to transform it will be difficult. Have you used JavaScript before? JS will be the best technology for solving your problem. — Mark Cooper, Jan 12 '18 at 13:44

Bhuwan · Accepted Answer · 2018-01-12T13:52:39.127

Set #HoverImg by default display:none and then on panel hover set display:block to #HoverImg and display:none to #defaultImg.

Try to use .panel:hover img.

.panel-body {
  background-color: RGB(203, 207, 208);
}

.panel-body p {
  margin-right: 20px;
}

.panel-body:hover {
  background-color: #6AA9DD;
  color: white;
}

.panel {
  min-width: 350px;
}

#HoverImg {
  display: none;
}

.panel:hover #defaultImg {
  display: none;
}

.panel:hover #HoverImg {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="col-xs-12 col-sm-6 col-lg-4">
  <a href="Dokumente/Vorlage/Template_Voiteq-SMILOG.dotm" downlaod="Template_Voiteq-SMILOG.dotm">
    <div class="panel-group">
      <div class="panel panel-primary">
        <div class="panel-body">
          <table>
            <tr>
              <td><img id="defaultImg" src="http://lorempixel.com/100/100/sports" alt="folder" /><img id="HoverImg" src="http://lorempixel.com/100/100/food" class="hide" alt="folder" /></td>
              <td>
                <p>Technische Dokumentation Formatvorlage Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

I hope this will help you!

Thank you, this works fine!!!!. I only need to delete **class="hide"**. — Chaxal, Jan 12 '18 at 14:05

Panel-Group Hover Change Img to another

1 Answers1