JavaScript | Image cropped and hover zoom effect (Pug, SCSS, JS) ...

USERS LOGIN:

FILES BY LETTERS:

ALL | # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

FILES BY YEARS:

2024 2023 2022 2021 2020 2019 2018 2017 2016 2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001 2000 1999 1998 1997 1996 1995 1994 1993

NEW UPDATES:

CATEGORIES

Drivers

Games

How to?

Icons

Popular:

POPULAR

VIDEO

NEWS

LINKS

IMAGES

FORUM

Radio

Guest | Registration

SCRIPTS

MUSIC

70s HITS 80s HITS 90s HITS Ambient Darksynth Disco Dreamwave Electronic Electropop Horrorsynth House Italo Outrun Rock Space Spacesynth Synthpop Synthwave Techno

PC GAMES

Free PC Games Game Cheats Game Upates No - CD/DVD Requirements

TRAINERS

Trainers Updates

TORRENTS

Torrents Updates

EMU ROMS

Emulators Nes roms

CSS, JS, STYLE, CODE: 55 scripts / 1 comments ...

A-Z | # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Image cropped and hover zoom effect (Pug, SCSS, JS)

Java

Images

Image cropped and hover zoom effect

August 15, 2024

415 views,

JavaScript | Image cropped and hover zoom effect (Pug, SCSS, JS) ...

Author: Sara B

Publiser Software Listings

License: Freeware

Compatibility: Chrome IE

Language: English

DEMO

Similar versions: (35)

Views:

Image Hover Effect - 4 (Pug, SCSS, JS)

583

THREE Image Transition (HTML, CSS, JS)

323

Animated CSS Image (Slim, SCSS)

563

Colorful shadows (HTML, CSS, JS)

592

Animated Covers (HTML, CSS, JS)

523

Simple Pulsing Image Hover Effect (HTML, CSS)

595

show 35 similar results

My image hover effect is a resized and cropped without background size. I used images in html code. It might be an idea for your next gallery! :)

Author: Sara B. (sara_bianchi94)

Links: Source Code / Demo

Created on: June 26, 2017

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

Tags: resized, cropped, hover, zoom, gallery

ENTIRE CODE

body {
  height: 100vh;
  background: #84e8dc;
  background: -moz-linear-gradient(-45deg, #84e8dc 0%, #f4ed8b 100%);
  background: -webkit-linear-gradient(-45deg, #84e8dc 0%, #f4ed8b 100%);
  background: linear-gradient(135deg, #84e8dc 0%, #f4ed8b 100%);
}

header {
  padding: 50px 0;
}
header h1 {
  color: white;
  text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 40px;
  letter-spacing: 0.4px;
  font-family: "Raleway", sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  padding: 0 30px;
}
.container .thumbex {
  margin: 10px 20px 30px;
  width: 100%;
  min-width: 250px;
  max-width: 435px;
  height: 300px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  outline: 2px solid white;
  outline-offset: -15px;
  background-color: blue;
  box-shadow: 5px 10px 40px 5px rgba(0, 0, 0, 0.5);
}
.container .thumbex .thumbnail {
  overflow: hidden;
  min-width: 250px;
  height: 300px;
  position: relative;
  opacity: 0.88;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
}
.container .thumbex .thumbnail img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  height: 115%;
  width: auto;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}
.container .thumbex .thumbnail span {
  position: absolute;
  z-index: 2;
  top: calc(150px - 20px);
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 50px;
  margin: 0 45px;
  text-align: center;
  font-size: 24px;
  color: white;
  font-weight: 300;
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.2px;
  transition: all 0.3s ease-out;
}
.container .thumbex .thumbnail:hover {
  backface-visibility: hidden;
  transform: scale(1.15, 1.15);
  opacity: 1;
}
.container .thumbex .thumbnail:hover span {
  opacity: 0;
}
</style>

</head>

<body translate="no">
  <header>
  <h1>Find your favorite place...</h1>
</header>
<div class="container">
  <div class="thumbex">
    <div class="thumbnail"><a href="javascript:void(0)"> <img src="https://bit.ly/2vnI5ZM"/><span>Beaches</span></a></div>
  </div>
  <div class="thumbex">    
    <div class="thumbnail"><a href="javascript:void(0)"><img src="https://bit.ly/3qgufUp"/><span>Mountains</span></a></div>
  </div>
  <div class="thumbex">
    <div class="thumbnail"><a href="javascript:void(0)"><img src="https://bit.ly/2NZ6ahm"/><span>Forest</span></a></div>
  </div>
</div>

How to use this HTML Script on your website?

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like

When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website
Anyways if you couldn't find that just paste the codes in the end of the source file.