When you hover over an image, it transforms into the full-screen background

I am looking to add a unique feature to my blog where the background is standard (for example, black color), but when I hover over a random image on the blog, that image will expand and become a full-screen background.

Here is the code snippet I have tried:

{block:ifphotoeffect}<div id="changer"></div>{/block:ifphotoeffect}

#changer  { top: 0px; 
left: 0px;
height: 100%; 
width: 100%; 
background: url(http://static.tumblr.com/mqkrxog/PPan52qgn/transparent.png)top left fixed repeat; 
background-size: cover; 
position: fixed;
z-index: -9999999999; 
opacity: 1; 
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s; 
-ms-transition:all 0.6s; 
-o-transition:all 0.6s;  
transition:all 0.6s; }

However, the desired effect does not seem to be working as expected.

htmlcssbackgroundhovereffect

Answer №1

Are you looking for something similar to this design?

#changer {
width: 300px;
height: 300px;
background: url(http://www.pooltile.com.au/Light%20Grey%20Granite/Pictures/Thumb/LtGreyTile.jpg);
  -webkit-transition: background 1s ease-out;
  -moz-transition: background 1s ease-out;
  -o-transition: background 1s ease-out;
  transition: background 1s ease-out; 
}

#changer:hover   { top: 0px; 
left: 0px;
height: 100%; 
width: 100%; 
background: url(http://www.pooltile.com.au/Light%20Grey%20Granite/Pictures/Thumb/LtGreyTile.jpg) left fixed repeat; 
background-size: cover; 
position: fixed;
z-index: -9999999999; 
}

See the DEMO here

If you need multiple images, it would be best to implement them using JS/jQuery.

Answer №2

Is this exactly what you are looking for?

I took inspiration from Hristo Georgiev's approach and made some modifications to change the background of a specific DOM element instead of moving it below all others (I used a div as an example, but the same concept can be applied to the entire page body).

While this solution does require JS and jQuery initially, you can easily convert the jQuery section into pure JavaScript. Here is a simple version:

function updateBackground(element){
    $('#yourBodyElement').css({'background-image':($(element).css('background-image'))});
}

function resetBackground(){
    $('#yourBodyElement').css({'background':'blue'});
}

I hope this tailored solution meets your requirements and helps solve your issue.

Answer №3

Here is the required code snippet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>



#changer {
top:0px; 
left:0px;
height:40%; 
width:40%; 
background-image:url(1.jpg);
background-position:left top fixed;
background-size: cover; 
position: fixed;
z-index: -9999999999; 
opacity: 1; 
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s; 
-ms-transition:all 0.6s; 
-o-transition:all 0.6s;  
transition:all 0.6s; }   


#changer:hover { 
top: 0px; 
left: 0px;
height: 100%; 
width: 100%; 
background-image: url(1.jpg) left fixed repeat; 
background-size: cover; 
position: fixed;
z-index: -9999999999; 



 }
</style>
</head>

<body>

<div id="changer"></div>

</body>
</html>

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

Ways to determine if an object has a provided attribute?

As I work on creating a small website using django, I encountered an issue: In my site, I want to view posts in detail, but not every post includes an image attribute - leading to errors when trying to display images that do not exist. The solution lies ...

htmldjangodatabase

Issue with Angular 2 - Basic form validation no longer functioning

The Angular 2 application I've been working on includes a simple form with input fields and basic HTML validation. Here's an example: <form (onSubmit)="submit()"> <input type="email" /> <input type="submit" value="save" /> ...

htmlformsangularvalidation

Incorporating nodejs variables and data into an HTML file

As a newcomer to nodejs, I am currently working on a project where I need to connect to elasticsearch using nodejs, fetch and manipulate data from it, and then insert the modified data into an html file. However, I'm struggling with the fact that html ...

htmlnode.jselasticsearch

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position. Below is a button that will turn blue and become active once a face is detected. When clicked, I want ...

javascripthtmlcsscanvasbootstrap-4

Struggling with CSS Positioning? Having trouble aligning your menu lists? Let us help

I'm currently in the process of designing a menu and sub-menu for my website. However, I've encountered an issue with the alignment of the sub-menu. My goal is to have the end of the sub-menu aligned with the right-edge of the "More" option, as ...

cssmenualignmentsubmenu

Stretchable navigation cell

I am working on a navigation bar called "nav" that consists of a "ul" and "li". I have specified the display property for the "ul" as table and for the "li" as table-cell. Setting the "ul" to take up the full width of the wrapper ensures proper alignment. ...

htmlcss

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

cssvue.jsbootstrap-4

Will the browser refuse input that is not a number if the <input type='number'...> tag is utilized?

If I set the input type to 'number', will the browser automatically verify and reject any non-numeric inputs in this field before submitting the form? ...

html

Tips for creating a side by side layout in Bootstrap modal content

I recently ventured into using Bootstrap and decided to create a simple modal based on the Bootstrap 4 documentation. You can check out the Bootstrap 4 modal for reference. The modal I created consists of two parts - Part 1 and Part 2, with a <hr> t ...

htmlcssbootstrap-4modal-dialogbootstrap-modal

The picture within the bootstrap popover is spilling out of the popover

I need help resolving an issue on my webpage where images in popovers overflow when they reach a certain size. I used an online demo to create the page, but now I'm encountering this problem. How can I fix it? Check out the Js Fiddle for reference: h ...

csstwitter-bootstrapbootstrap-4popover

Applying CSS to a jQuery variable: Step-by-Step Guide

$(document).ready(function() { var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()); $('#startdate').datepicker({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', ...

javascriptjqueryhtmlcss

Firefox animation causes text to flash intermittently

I am looking to create a slide animation using CSS and AngularJS. I have made progress with this example: JSFiddle. The animation works smoothly on Chrome, but on Firefox, the text shakes and flickers slightly during the animation. I am struggling to pinpo ...

htmlcssangularjs

Is there a way to automatically wrap every `ul` element in a `div` using JQuery?

Is there a way to automatically wrap all ul elements in div using JQuery? <div id="my_uls"> <ul> <li>Item one</li> <li>Item two <ul> <li>Item one of two</li> </ul> &l ...

javascriptjqueryhtml

Stop the page from scrolling when scrolling within a specific DIV to address the [Violation] warning appearing in the console

Initially, it may seem like a duplicate question that has been answered here, but there are additional aspects that need to be addressed. How do I resolve the following [Violation] warning in the Google Chrome console? [Violation] Added non-passive eve ...

javascriptjquerycssmodernizrpassive-event-listeners

How can I use jQuery to submit a form that has been removed from the document?

Having a popup with a form inside, the issue arises after clicking "save" and the popup disappears. As a workaround, an attempt was made to clone it using var form = $(this).clone();, followed by calling form.submit() but unfortunately, this method did n ...

jqueryhtml

Exploring html select and input elements in a loop

Currently, I am in the process of developing an application that calculates the total price of selected items based on user input. Each row consists of two dropdown menus (ID/item) and a quantity input field. Additionally, users have the option to add rows ...

javascriptjqueryhtml

Does a specific HTML element exist that is unable to have JavaScript within its content?

Let me pose a question, and while the answer may be "no", it never hurts to inquire... I am in need of taking in formatted text as HTML markup and later displaying the HTML to showcase the formatted text. This is an extremely common situation. Even popula ...

htmlbrowserxss

Struggling to find the button and implement the click function: Using Selenium WebDriver in Java

I am struggling to find and click the button on the website I'm automating using Selenium WebDriver with Java. Can anyone assist me in locating it using CSS selectors? Here is the HTML code for the button: <div class="inputWrapper newButton" name ...

javacssseleniumselenium-webdriver

Problem with Jquery Ajax, failing to recognize option values

Hello everyone, please review the code snippet below... $.fn.myajax = function (options) { var defaults = { my_event: "", my_url: "", my_data: "", } var o = {}; var mydata = options.my_data; $.extend(o, default ...

javascriptphpjqueryhtmlajax

activate the design mode for iframes

I am having an issue with enabling design mode for an iframe using JavaScript. When creating the iframe inline, I can successfully turn on design mode by using the following code: iframe.contentDocument.designMode = "on"; However, if I load the iframe us ...

javascripthtmliframe