Switch Image on Hover in Panel Group

After delving into Bootstrap, I encountered an issue.
I have a Panel-Group with an image and some text.
The challenge is switching the image on hover, but it should change when hovering over the panel, not just the image itself. I've found solutions for changing images on hover over the image, but not on the entire panel.

Here's 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>

If you're unsure about what I'm asking, please let me know :). Hoping someone can assist me with this.

Best Regards

jqueryhtmlcssimagebootstrap-4

Answer №1

Initially, set the #HoverImg element to have a display:none property. Then, on hover over the panel, change the display:block property for #HoverImg and set display:none for #defaultImg.

For this functionality, you can utilize .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>Technical Documentation Template Voiteq-SMILOG</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </a>
</div>

I trust that this solution will be beneficial to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking for a way to update the path of an old image with a new one. My current method involves utilizing ajax and JavaScript to upload an image using PHP

I am trying to use AJAX and JS to upload a new image in PHP. How can I replace the old image's path with the newly uploaded image? Additionally, I want to save the new image's path to the database. Here is what I have done so far: <html> ...

phpjqueryajax

The filter search feature fails to return any results when data is inputted into the tables

I have implemented a filter search feature within two tables on my website. My goal is to retrieve the search results for a specific drink while keeping the table headings fixed in their positions. For instance, if I type "Corona" into the search box, I ...

htmlcss

Employ the Google Charting library for creating a GeoChart that is currently not displaying

Hello everyone. I'm having a bit of an issue with my web page development. I've been trying to add a GeoChart, but no matter how many times I copy-paste the code from the Google developer's website, the map just won't show up. I must be ...

javascripthtmlgoogle-visualization

The function $(...) does not recognize tablesorter

Currently, I am encountering issues with the tablesorter plugin as my system is unable to recognize the existing function. It is unclear whether there might be a conflict with other JavaScript files, especially since I am implementing changes within a Word ...

javascriptjquerywordpress

Calculation error causing incorrect top value display in Chrome [bug alert!]

After dynamically creating an element in jQuery and adding it to the page, I applied a class that sets its position to top:50%. Everything appeared fine at first glance, with the element positioned correctly at 50%. However, when attempting to retrieve the ...

jqueryhtmlcssgoogle-chrome

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

htmlcss

Discovering components with identical html attributes in Selenium

I am currently developing a web crawler using Python 3.8. My goal is to convert the table below into a pandas dataframe using Selenium, Pandas, and BeautifulSoup. <table class="no_border_top" width="95%" align="center"> ...

pythonhtmlselenium-webdriver

Tips on incorporating a repeating gradient instead of a linear gradient

I have the following code for a linear-gradient. Click here to view the code Is there a way to modify it to use a repeating gradient instead? The goal is to maintain the same image but with a repeating gradient effect. background-image: repeating-linear ...

cssgradientlinear-gradientsrepeating-linear-gradient

Incorporate additional text to the downloads hyperlink using jquery

Is it possible to achieve this using jQuery since I am unable to directly modify the HTML markup? I am looking to append download.php?file= to a URL without replacing the entire href attribute. Here's an example of what I'm trying to achieve: & ...

javascriptjquery

Unable to access content from a dictionary in Django templates

Currently, I am attempting to retrieve the value of the class method that returns a dictionary. The function is structured as follows: class GetData: def __init__(self, api_key, ip, interface): self.api_key = api_key self.asa_ip = ip ...

pythonhtmldjangotemplatesjinja2

Using AJAX to submit a form and then refreshing the page within the current tab

I am facing an issue with my web page that contains multiple tabs, some of which have forms. Whenever a form is successfully submitted, the page reloads but always goes back to the default first tab. To address this, I am attempting to use a storage variab ...

javascripthtmljqueryajaxforms

Leveraging multiple ">" CSS selectors

Here is the HTML code to style: <table id="my-table"> <tr> <td> I would like to customize this </td> <td> <table> <tr> <td> Not looking to customize t ...

htmlcss

How can CSS Bootstrap flex width be used to prevent parent element from expanding too much with long, single line text? Utilizing ell

​Having encountered a tricky situation with CSS and flexbox, I found myself needing to implement the following properties: ​text-overflow: ellipsis; ​white-space: nowrap; ​overflow: hidden; However, when the text was too long, it caused t ...

htmlcssbootstrap-4flexboxwidth

Simple steps to successfully pass two parameters to jsonpCallback

Hey there! Below is the code snippet where I am using an ajax call in jQuery to invoke function 1 named "setEmailAFriendCount". In this function, we are passing a variable with JSON data type. However, I now need to call the same function from an ajax call ...

jqueryjson

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

htmltypescriptangularangular2-directives

The table is overflowing its parent element by exceeding 100% width. How can this issue be resolved using only CSS?

My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width. While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% d ...

htmlcsshtml-table

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

javascripthtmlcssreactjshtml5-video

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

csstwitter-bootstrapresponsive-designadsbanner-ads

Handling AJAX requests using jQuery

I'm currently in the process of learning how to utilize jQuery Ajax. Could you explain to me the significance of function(response), as well as what exactly is meant by response == 1 and response == 2? jQuery.post(ajaxurl, data, function(response) { ...

javascriptjqueryajax

Excessive iterations occurring in JavaScript for loop while traversing an array

After addressing the issues raised in my previous inquiry, I have made significant progress on my project and it is now functioning almost exactly as intended. The main purpose of this website is to iterate through the World Of Tanks API to generate cards ...

javascripthtmljsonapifor-loop