I am attempting to create a feature where images within cells in an HTML table enlarge when hovered over. My goal is to implement this functionality across all tables on my website. Take a look at the code I have written so far:
td img {
height: 150px;
}
td img:hover{
height: 175px;
}
Although this code sets the initial image height correctly, nothing actually happens when I hover over them. It is clear that I am missing something here, but what could it be?
It's important to specify the width and height of cells in order to properly adjust the image within those parameters. This will prevent any shifting of rows when hovering over the table -- modify table image size on hover
html {
padding: 50px;
}
table {
width: 600px;
padding: 10px;
background: #FFF;
border: 1px solid #BBB;
}
th {
padding: 10px;
}
td {
vertical-align: middle;
text-align: center;
padding: 5px;
border: 1px solid #DDD;
}
td:first-child {
width: 50px;
}
td:last-child {
width: 200px;
height: 200px;
}
td img {
width: 75%;
height: auto;
}
td img:hover{
width: 90%;
height: auto;
}<table>
<thead>
<th>Image Title</th>
<th>Image</th>
</thead>
<tbody>
<tr>
<td>Image 1</td>
<td><img src="http://www.logoeps.net/wp-content/uploads/2013/06/stackoverflow_logo.jpg" /></td>
</tr>
</tbody>
</table>It is possible to achieve this effect using CSS
td:hover img{
height:175px;
}
You could also accomplish this using jQuery:
$('td img').on('mouseenter',function(){
$(this).css({
'height':'175px'
});
});
* {
margin: 0;
padding: 0;
}
img {
height: 150px;
width: auto
}
td:hover img {
background: red;
height: 200px;
}<table>
<tr>
<th>Title</th>
<th>Image</th>
</tr>
<tr>
<td>Image Title</td>
<td><img src="https://torange.biz/photofx/5/8/image-profile-picture-beautiful-exotic-flower-5532.jpg" alt=""></td>
</tr>
</table>Check out my latest progress on the codepen here The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Ess ...
I am a beginner in React and HTML. Currently, I am using MUI and React to create my own website. I am currently attempting to add an "Upload button" that will allow me to select an image file when clicked. Below is the official implementation: <Button ...
Currently, I have a VBA macro running in Excel 2016 that retrieves information from the internet using Chrome and Selenium WebDriver. The macro navigates through various webpages, each with slightly different content structures. This variation leads to cha ...
I am currently working on creating a cognitive experiment for a professor using jsPsych. The experiment involves around 200 logical statements in the format T ∧ F ∨ T with 4 different spacing variations. My main challenge is to figure out a way to a ...
Trying to incorporate a tab navigation menu. Came across this fantastic fiddle example http://jsfiddle.net/S78Bt/3/ that perfectly demonstrates what I want to achieve. However, I'm facing some difficulties in getting the tabify function to work. Fol ...
Struggling to dynamically generate HTML using jQuery and facing challenges with adding a nested loop to generate specific target HTML code. The target HTML code is as follows: <div class="daily-featured__video-social"> <ul class="share-tools_ ...
I'm attempting to have two column divisions appear on the same line. Take a look at my code: <div class="col-md-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Left Division </div> ...
I have implemented an overlay search box with the placeholder "Sök," and I want the text entered by the user to be removed and the placeholder to be reset if the user exits the search box by clicking the 'x' in the upper right corner. How can I ...
Currently, I am encountering an issue with changing the color when a user clicks on a list item using the latest version of knockout js. My goal is to change the color of a list item when it is clicked and maintain that color until another item is clicked, ...
I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...
Just starting out with coding and working in Angular, I'm trying to display JSON data from Firebase in HTML. Here's the specific call I'm using: <p>{{workout[0].box.info.training.strength.exercise[1].movement.freetext }}</p> Th ...
Can an element's width be dynamically set using the following code: <img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1100px"/> In this code, getScreenSize() is a JavaSc ...
I am currently facing an issue with my code that is supposed to use LAT&LONG data saved in a txt file and display it as a Google Map in HTML. However, the PHP function to import the txt file is not working at all. Any suggestions on what might be causi ...
Utilizing the bootstrap MODAL plugin with nested divs, I have a requirement where clicking on the inside div should display the EDIT form, and clicking on the container div should show the ADD NEW form. Here is the code snippet: <div id="container" sty ...
I am interested in creating an image of 1 star arranged into 6 stars by simply targeting the parent element's class. .stars { /* which HTML tag should be used? */ } <div class="stars"> <img src="image/stars.jpeg"> <img src="ima ...
Coding Example:- '<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More" /> <p> ' + item.FormattedMessage + ' </p>& ...
How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...
I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...
My gridview is displaying page numbers in separate columns instead of together in the center. How can I bring the page numbers together in the center? <asp:GridView ID="GridView1" runat="server" Width="100%" OnRowCommand="GridView1_RowCommand" CssClas ...
I am currently working on a basic login form using bootstrap and encountering an issue, below is the code snippet: <div class="container"> <div class="row justify-content-center no-gutters" style="padding-top:150px ...