mouseover effect html to auto size for mobile

30 Views Asked by Unclejemima At 28 February 2022 at 21:40

I've got a simple mouseover effect on a webpage I'm working on that I'm trying to have auto resize to fit the page so it is more mobile friendly.

Any help would be greatly appreciated. I know I need something like

.responsive {
  width: 100%;
  height: auto;

...but I'm not certain how/where to insert it so it works.

Code currently looks like this...

<body>
<a href="https://www.bodensurfaces.com/cowboy-trail.html">
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  max-width: 100%;
  height: auto;
}
.image3 {
 -webkit-transition: all 0.7s ease;
 transition: all 0.7s ease;
} 
.image3:hover {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
</style>

<img class="image3" src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/cowboy-trail-350x250-white-border_orig.png">

Original Q&A

There are 1 best solutions below

Evreux Pendragon On 28 February 2022 at 23:37

Use a div to wrap your image, then apply the responsive class to your div. Also set your image width to 100% so it covers the whole div.

<body>
    <a href="https://www.bodensurfaces.com/cowboy-trail.html">
        <body>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                .responsive {
                    max-width: 100%;
                    height: auto;
                }

                .image3 {
                    width: 100%;
                    -webkit-transition: all 0.7s ease;
                    transition: all 0.7s ease;
                }

                .image3:hover {
                    -webkit-transform: scale(1.1);
                    transform: scale(1.1);
                }
                
            </style>
            <div class="responsive">
                <img class="image3"
                    src="https://www.bodensurfaces.com/uploads/4/5/8/2/45821353/cowboy-trail-350x250-white-border_orig.png">
            </div>
        </body>

mouseover effect html to auto size for mobile

There are 1 best solutions below

Related Questions in HTML

Related Questions in MOBILE

Related Questions in MOUSEOVER

Related Questions in AUTOSIZE

Trending Questions

Popular # Hahtags

Popular Questions