How to zoom background image in styled components

Solution

To zoom background image in styled components, you have to define a styled div element using the styled function from styled components, we will use a background image with css class set height: 300px and width: 300px.

Snippet

In this snippet, we will see add background image in styled components and use css style background : url (’logo192.png’) and set the &:hover.

const StyledDiv = styled.div`
  background: url("logo192.png") no-repeat center;
  background-size: contain;
  height: 300px;
  width: 300px;
  border: 5px solid;

  &:hover {
    height: 80vh;
    width: 80vw;
  }
`;

Example

In this example, we will import styled componets library and uses it to define a new component called StyledDiv, as the background image set file logo192.png.

Let’s start coding…

App.js

import React from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
  background: url("logo192.png") no-repeat center;
  background-size: contain;
  height: 300px;
  width: 300px;
  border: 5px solid;

  &:hover {
    height: 80vh;
    width: 80vw;
  }
`;

export default function App() {
  return (
    <StyledDiv className="App">
    
    </StyledDiv>
  );
}

Output

The image will zoom when you move the mouse over the image.

Links

Here, we are provided code sandbox links for the above program zoom background image in styled components. then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.