What is the best way to resize images while also maintaining their ability to transition on hover?

Having an interesting dilemma here.. I'm trying to utilize this CSS code:

.custom-forums {
    height: auto;
    width: 100%;
    border-image-source:transparent url("../images/forums.png") center top no-repeat;
}

in combination with:

.custom-forums:hover {
   background-image: url('../images/forums-hover.png');
}

The challenge lies in the fact that when the width is set to 100%, the image doesn't display. However, if both width and height are set to 170px, it works fine. I aim to have the button adjust its size based on the screen resolution while still being able to change the hover image as desired.

Appreciate any insight, Mas21

javascriptjqueryhtmlcssimage

Answer №1

For background images to display properly, there must be a specified height or contents of specific dimensions within the containing element.

Here's an alternative approach you might consider:

  • Utilize a background image
  • Add another image inside that div and set its opacity to 0 on hover, revealing the background image.

Try running this demonstration:

.container {
background: url('http://newimage.com') no-repeat center center;
width: 200px;
}

img {
transition: opacity ease-in-out .2s;
}

img:hover {
opacity: .3;
}
<div class="container">
<img src="http://innerimage.com">
</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

Issue with jquery in Bootstrap 4

I'm encountering an error even after adding the script tags for jquery, tether, and bootstrap. The error persists despite following Bootstrap's starter template on their website while attempting to integrate it into an electron app. Here is the ...

jqueryelectronbootstrap-4

Rows with an ambiguous number of horizontal lines

I am looking to create multiple rows that are horizontally floated, as shown in the image. However, I am facing an issue with setting the width of the container because I do not know the exact number of rows that will be added. Currently, my code looks li ...

htmlcss

Guide on implementing Regular Expressions in Directives for validation in Angular 8

Managing 8 different angular applications poses its unique challenges. In one of the applications, there is a directive specifically designed for validating YouTube and Vimeo URLs using regular expressions. Unfortunately, once the RegExp is declared, ther ...

javascriptangulartypescriptangular-directive

Effortless database updating in ASP.Net Gridview using jQuery AJAX without any pesky postbacks

On a specific page, users are required to check items off within a gridview without having to go through the process of clicking Edit and Save. After exploring various sources for information, I was able to come up with the following solution. Within the g ...

jqueryasp.netajaxjsongridview

What strategies can I implement to minimize repetition in React when utilizing the useState hook?

I have implemented useState in my React Native application. I defined states named lstandtime and lacttime. Additionally, I have created functions called onSubmitfunc, LsonChangefunc, and LaconChangefunc. We initially required 3 instances of the MainCons ...

javascriptreactjsreact-native

Decode JSON and generate a user-friendly Array

My aim is to extract and organize the JSON data received from an external API into a custom array. However, I am encountering two challenges: I'm struggling to access the value labeled #2 under "Meta Data". If I want to extract the first array n ...

javascriptnode.jsarraysjson

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

javascriptphphtml

The proxy encountered a TypeError when the trap for the property 'set' returned a falsish value

After migrating my code from using es5 class prototype representation to es6 class representation, I encountered an error. This is the comparison of the code before and after migration: ES5 syntax function RoutingScreen (context) { Object.assign(this, ...

javascriptnode.jsecmascript-6es6-class

What is preventing access to the JSON data?

function loadResponse(filter) { $.ajax({ type: 'GET', url: 'path/to/example.json', dataType: 'json', cache: false, beforeSend: function () { console.log('load ...

jqueryjson

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

javascripthtmlcssreactjstag-cloud

Get rid of the border surrounding a main call-to-action button

While trying to override Bootstrap styles, I encountered a problem. Whenever the user presses a primary button <button class="btn btn-primary">Test</button> An annoying blue outline appears and I can't seem to remove it. I attempted to o ...

csstwitter-bootstrap-3

When navigating through a view in backbone.js, ensure to include an argument in the routing process

Looking to include an argument while routing within a Backbone.js application Below is the script: var AppRouter = Backbone.Router.extend({ routes: { 'toolSettings/(:action)' : 'toolSettings' } }); var initialize = function ...

javascriptbackbone.js

Dealing with the 'routes not found' error in a Node.js Express application (troubleshooting)

Attempting to address potential missing router errors in my app.js or router file has been a challenge for me. (various solutions found on Stack Overflow have not provided the correct resolution) The current state of my app.js or router files is functiona ...

javascriptnode.jsexpress

How to Resolve ENOENT ERROR When Using fs.unlink in an Express.js Simple Application?

Currently, I am developing a basic blog using express.js. For managing the posts, I have opted for Typicode/lowdb as my database. The posts are created, updated, and deleted based on unique IDs stored in a data.json file. Additionally, I utilize the slug d ...

javascriptjsonnode.jsexpressfilesystems

Struggling to make the fancybox feature function with html/php

I've been trying to find a solution to this problem repeatedly, but I just can't seem to crack it. All I want to do is use fancybox to display an image. Since this is my first time using fancybox, I'm sure someone with more experience will ...

javascriptphpjqueryhtmlfancybox

What are some effective methods for selectively handling batches of 5-20k document inputs when adding them to a collection containing up to one million documents using MongoDB and Mongoose?

My MMO census and character stats tracking application receives input batches containing up to 5-20k documents per user, which need to be aggregated into the database. I have specific criteria to determine whether a document from the input already exists i ...

javascriptnode.jsmongodbmongoosebigdata

Guide to positioning a THREE.js plane onto the exterior of a spherical object

Just starting out with Threejs and 3D graphics. I'm interested in learning how to position a plane of any dimensions on the surface of a sphere. Here's an example image of what I'm aiming for: example image ...

javascriptthree.js3dgeometry

node js returning undefined value

I'm currently working on configuring my node.js to retrieve and display the value submitted through an HTML form. Here's a snippet of the node.js file: const app = express(); var path = require('path'); var fs = require('fs' ...

htmlnode.jsamazon-ec2

I am eager to obliterate the table and reconstruct it while maintaining the same ID

linkForBC represents the checkbox ID. When this checkbox is clicked, I want to generate a new table with the ID option_list. This is the HTML layout: <tr class="checkList"> <td class="bcid">BC</td> <td> ...

jquery

What is the process for uploading a JSON file from your local drive?

I am attempting to use jQuery to load a local JSON file. The code seems to be functioning properly, but for some reason, the data is not being made available in an array. $.getJSON("/ajax/data/myjasonfile.json", function(json) { console.log(js ...

javascriptjqueryarraysjsonajax