When a cursor hovers over an image, a dark line appears

I wanted to create a hover effect where the image would enlarge when hovered over. I achieved this using a JavaScript function that applies the transform property with a scale of 1.2 to the picture. However, during the animation, a black line appears at the bottom of the image, even though it's not related to the image itself. The href attribute contains a link to a locally saved image, so I replaced it with # for the code to work properly. Click here to view the image.

function actionWhenMouseOver(imgName) {
  var img = document.getElementById(imgName);
  img.style['transform'] = "scale(1.2)";
  img.style['transition'] = "0.3s";
}

function actionWhenMouseOut(imgName) {
  var img = document.getElementById(imgName);
  img.style['transform'] = "scale(1)";
  img.style['transition'] = "0.3s";
}
<div class="col-md-12 col-lg-6 text-center mb-3">
  <img src="#" alt="" class="block" id="block2" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)">
</div>

javascriptcss

Answer №1

One way to tackle this issue is by utilizing only CSS. By creating a class like block specifically for scaling images on hover, you can avoid the appearance of the black line. Here's an example:

.block {
  transform: scale(1);
  transition: 0.3s;
}

.block:hover {
  transform: scale(1.3);
}
<div class="col-md-12 col-lg-6 text-center mb-3">
  <img src="#" alt="" class="block" id="block2">
</div>

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

The magic of CSS's 3D Transformation feature

Currently, I am working on a 'Flip' effect using the CSS3 transform Property. While everything seems to be functioning properly in recent versions of Chrome, Firefox, and Safari, I'm facing challenges when it comes to creating a fallback fo ...

htmlcsstransformfallback

Exploring Rails integration with FullCalendar: Retrieving data from the database using varying column titles

Currently utilizing Rails 4.0 in conjunction with FullCalendar, I am encountering an issue where some fields in my database do not align perfectly with the defaults of FullCalendar. For instance: My columns FullCalendar's Na ...

javascriptruby-on-railsfullcalendar

When utilizing jQuery.Mockjax to simulate the JSON data, the Backbone.Collection.fetch() function consistently results in a 404 error

My setup is pretty straightforward: Main.js: (function($) { "use strict"; var Company = Backbone.Model.extend({ defaults: { title: "", description: "" }, initialize: function() { ...

javascriptjqueryjsonbackbone.js

A guide on implementing the MVC architecture in a web application with Node.js, Express, and PostgreSQL

I'm struggling with implementing the MVC architecture in my node web app, specifically when it comes to separating the model from the controller. Currently, I have the views properly organized (all my .ejs files) and I consider my app.js as the contr ...

javascriptnode.jspostgresqlexpressmodel-view-controller

Tips for resolving CSS issues in a vast style sheet

I'm currently facing a challenge with modifying the CSS of a Wordpress plugin I need to utilize. The learnpress.css stylesheet is very extensive, spanning over 2000 lines, making it quite complex to comprehend. All I am trying to achieve is a simple t ...

cssgoogle-chrome-devtoolsbackground-color

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

I am looking to place two progress bars next to each other, but I have tried using float: left and inline-block without success. I am open to a solution using flex, but I believe there must be a simple fix for this issue. Here is a link to the fiddle for ...

htmlcss

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

javascriptcssdom

Implement the addition of a class upon hovering using AngularJS

My goal is to include a new class when hovering over the li element using Angular in the code snippet below. <li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}"> <a href="interna.html"> ...

javascriptcssangularjs

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap

Is it possible for Javascript to handle a string of 27601 characters in length?

I have created a webmethod that returns an object containing strings. Each string in the object is of length 27601. This pattern continues for all array members - str(0) to str(n). When my webmethod returns this exact object, I encounter an issue on the c ...

javascriptvb.netwebmethod

Initializing the $(this) variable prior to the function declaration

I am faced with the task of performing multiple checks based on the IDs of certain elements, all of which vary slightly. So, I created several functions to handle this, and rather than repeatedly using $(this).children ..., I wanted to create a short vari ...

javascriptjqueryhtmlvariablesglobal-variables

Enhancing elements with fade-in effects upon hovering

Is there a way to incorporate a subtle fade in/fade out effect when hovering over items on this webpage: http://jsfiddle.net/7vKFN/ I'm curious about the best approach to achieve this using jQuery. var $container = $("#color-container"), ...

javascriptjqueryhtmlcss

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

javascriptjqueryhtmlcss

Is there a way to block form submissions for users who have disabled JavaScript?

Our inquiry form mandates users to input basic information such as their name, location, contact details, and a comment or question. Unfortunately, we have been receiving numerous incomplete forms where essential fields are left blank. It has come to our ...

javascriptphpforms

Issues with Angular2 causing function to not run as expected

After clicking a button to trigger createPlaylist(), the function fails to execute asd(). I attempted combining everything into one function, but still encountered the same issue. The console.log(resp) statement never logs anything. What could be causing ...

javascriptangulartypescriptwebfrontend

Interested in integrating server side JavaScript with your Android application?

Running a simple web page on a Raspberry Pi to toggle the board's LED with the click of a button. The button triggers a JavaScript function that controls the LED. Now, I want to be able to call this script from a button in an Android application... B ...

javascriptandroidjquery

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

"When the value is false, use the Vue binding to apply a specific

My challenge involves managing a website that is designed to receive boolean values and store them in an array where the key represents the ID and the value represents the boolean. For example: policiesActive[ "2" => false, "3" => false] The w ...

javascriptarraysvue.jsboolean

JavaScript animation for sequencing traffic lights

I have been working on completing a task that was assigned to me. (iii) Explain the organization of an array that could manage the traffic light sequence. (iv) Develop a script that utilizes the array outlined in part (iii) to create an animated display ...

javascripthtmlarrays

Reverse a filter within an ng-repeat loop - AngularJS

I have a question that I haven't found the answer to yet. Here is the issue I'm facing: The JSON data I am working with has this structure: [{ "batch_queue_name": "Batch One", "start_date": "12/01/2016 10:18 P.M.", "end_date": "12/03/2016 ...

javascriptangularjsangular-filters