Adjust the positioning of the background and create a smooth fade effect for

Is there a way to simultaneously change the background position and display an image in front of it?

My current solution involves using a second div with padding to center it, but when I hover over the padding of the first div, the image does not change.

#contentright {
height: 58px;
width: 256px;
overflow:hidden;}

I have created a fiddle to demonstrate my issue. JSFIDDLE

Any suggestions on how to resolve this? Thanks!

Answer №1

view in fiddle

    .brand {
      width: 100%;
      height: 100%;
      background:url(http://s2.directupload.net/images/140101/nx8ckqai.png) 0 0 no-repeat;
      background-position: center center;
   }

inside the brand class

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

Trouble with z-index functionality in jQuery datatable

I'm struggling to get the Action Box displayed as an upper layer. I've already tried using z-index but it doesn't seem to make any difference. https://i.stack.imgur.com/rJ1vL.png $(document).ready(function () { ...

Transferring information to a function

I'm looking for a way to pass the variable Date to my function HasBtnRights(). Does anyone have suggestions on how I can achieve this? <asp:TemplateField HeaderText="More info" Visible='<%#HasBtnRights(Eval("Date")) %>'> < ...

What is the best way to trigger a jQuery function once a form has been successfully submitted?

Is there a way to execute a jQuery function AFTER a form has been submitted? I am familiar with calling a function ON submit, but I specifically need it to run after the form data has been posted and stored in the database using PHP. In my website projec ...

Upon installation, the extension that replaces the new tab fails to detect the index.html file

edit: Check out the Chrome Extension here Edit 2: It seems that the recent update containing the index.html file was not published due to Google putting it under revision. Apologies for forgetting to include the index.html file in the upload zip, as I ...

Deactivating a widget on one of my web pages

I'm looking to disable a widget on certain pages. Does anyone know how to do this? One idea I had was to add a condition in the HTML (using Django or PHP?) of the widget that would make it only appear if the site URL is not the one where I don't ...

There are times when window.onload doesn't do the trick, but using alert() can make

I recently posted a question related to this, so I apologize for reaching out again. I am struggling to grasp this concept as I am still in the process of learning JavaScript/HTML. Currently, I am loading an SVG into my HTML using SVGInject and implementi ...

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last ...

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

The form is not being submitted when I click on the submit button because I have two buttons that trigger AJAX requests

I am facing an issue with a form where there is a submit button inside it, as well as another button within the form that has attributes type=button and onclick=somefunction(). The button with the onclick function works perfectly fine, but the other button ...

SweetAlert html is not recognizing ng-app, but it functions correctly within the html body

When inserting a bootstrap table inside a SweetAlert, I encountered an issue where using ng-app or ng-repeat to populate data inside the table's rows did not call ng-app. However, when populating the table outside of the SweetAlert in the body, ng-app ...

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

Eliminate excess space around images in Bootstrap

I have an image tag with a padding applied to it. I am using the Bootstrap CSS framework. Currently, there is a white background behind the image that I want to remove and make it partially transparent instead. The image is in PNG format, so I suspect the ...

Using JavaScript to display content on the screen

As a newcomer to Javascript, I'm looking for a way to display my variable on the webpage without utilizing <span> or innerHTML. var pProductCode = $('[name=pProductCode]').val(); $('input[id*="_IP/PA_N_"]').each(function(i){ ...

Tips for combining dvloading and required functionalities on the submit button

My form has 2 fields that must be filled out, and I used the required attribute to enforce this rule. Enter A:<input type="text" name="a" required><br> Enter B:<input type="text" name="b" required><br> <button type="submit" cl ...

remain on the multi drop down page for a specified duration

I have created a dropdown menu with a second level drop-down page that is a form. Now, I want the second level drop-down page to stay open longer, so I have used the following JavaScript code: <script> var timer; $(".parent").on("mouseover", functio ...

Utilizing CSS to incorporate percentage points

Currently, I am facing a challenge in implementing a vertical line with percentage marks. It needs to be positioned relative to the percentage bar, just like how it appears in the screenshot below: https://i.stack.imgur.com/CNWUV.png I attempted a basic ...

Creating a Form in a Popup with Bootstrap

I have implemented Bootstrap on my website. Check it out at: hubb.tekkkz.com I am facing an issue where, when clicking on the login/register button on the right, the modal pops up. However, the user input elements within the modal are not taking up the ful ...

make changes to the current selection in the drop-down menu

Imagine I have a select list with 3 options: <select> <option>1</option> <option>2</option> <option>3</option> </select> My goal is to create a textfield and button that will allow me to upd ...

Is there a way to create an input field that accepts only numbers and behaves like a password field simultaneously?

I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately ...

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...