Image hover with pure CSS

Today, let's take a look at the mouse hover effect of a group of pure CSS. We will study Code Point 1, effect 2, and effect 3 online. Download the favorite point here, and click effect preview here.

Effect 1: html file of result 1

<Div class = "pic">  <span> here is a title </span> </div>

In the css file, we mainly implement positioning and hover animation.

/* Image box style, width and height, border, shadow, position, mouse style, overflow */. pic {width: 500px; height: 500px; border: 10px solid #333; box-shadow: 0 0 10px rgba (, 0 ,. 6); margin: 50px auto; position: relative; overflow: hidden; cursor: pointer;}/* image title style, width and height, background color, horizontal vertical center, positioning, transparency */. pic span {position: absolute; left: 0; bottom: 0; width: 500px; height: 50px; background: rgba (0, 0 ,. 5); color: # fff; font-size: 24px; line-height: 50px; text-align: center; opacity: 0 ;} /* Add a transition attribute to the element to be animated */. pic img ,. pic span {transition: all. 5 s;}/* transparent animation after hover */. pic: hover span {opacity: 1;}/* resize image after hover */. pic: hover img {transform: scale (2 );}

Effect 2

The following shows the implementation process of result 2, which is slide up and down. First, let's look at the html file. We need two image elements: the upper half and the lower half.

<div class="pic"><span>OK,You can see it.</span></div>

The css file is as follows. We will write the implementation principles into the comments and will not explain them one by one.

/* Set the image box style, width and height, border, shadow, overflow, and position */div. pic {width: 500px; height: 500px; cursor: pointer; margin: 50px auto; position: relative; overflow: hidden; border: 10px solid #333; box-shadow: 0 0 10px rgba (0, 0, 0 ,. 8);}/* unified settings of the upper and lower parts, absolute positioning and Transition */div. pic img {position: absolute; left: 0; transition: all 1 s;}/* cropping and locating the upper part of the image */div. pic img. top {top: 0; clip: rect (0px, 500px, 250px, 0px);}/* crop and locate the lower half of the image */div. pic img. bottom {bottom: 0; clip: rect (250px, 500px, 500px, 0px);}/* location change of the image after hover */div. pic: hover img. top {top:-50px;} div. pic: hover img. bottom {bottom:-50px;}/* set the image title style, text color, horizontal center, vertical center */div. pic span {display: inline-block; width: 100%; text-align: center; line-height: 500px; font-size: 24px ;}

The cropping principle of CSS Clip is explained in detail.

clip: rect(<top>, <right>, <bottom>, <left>);

Top, right, bottom, and left indicate the distance between the top and bottom left sides of the cropped rectangle and the original side, as shown in

You can refer to "CSS clip: rect rectangular tailoring function and some application introduction" of zhangxin xuda NIU for details, or experience the cropping effect through online cases.

You can also use Expanding Overlay Effect on Codrops to learn the cool applications of clip attributes.

The difficulty of effect 3 lies in the implementation of triangular images. Here we mainly use skew. The html file is like this. We need to add containers to the two images respectively, and then set the oblique switch in the opposite direction for the image container and the image respectively.

<div class="pic">    <div class="top">            </div>    <div class="bottom">            </div>      <span>OK,You can see it.</span></div>

Effect css file

/* The image box style is the same as the first two effects */. pic {width: 500px; height: 500px; overflow: hidden; cursor: pointer; border: 10px solid #333; box-shadow: 0 0 10px rgba (0, 0, 0, 0 ,. 8); margin: 50px auto; position: relative;}/* positioning, oblique cutting, and overflow of the small containers of the two images. Because the image width and height are the same, the oblique cutting is 45 degrees */. pic. top ,. pic. bottom {width: 500px; height: 500px; overflow: hidden; position: absolute; transform: skew (-45deg);}/* set different positions for the upper and lower image small containers, respectively, change origin */. pic. top {left: 0; top: 0; transform-origin: 100% 0; transition: all 1 s, transform 0 s ;}. pic. bottom {right: 0; bottom: 0; transform-origin: 0 100%; transition: all 1 s, transform 0 s;}/* the upper and lower two images are oblique to the opposite direction */. pic. top img ,. pic. bottom img {width: 100%; height: 100%; transform-origin: inherit; transform: skew (45deg);}/* Changes of small image containers after hover */. pic: hover. top {left:-20px; top:-20px ;}. pic: hover. bottom {right:-20px; bottom:-20px;}/* set the image title */. pic span {transform: rotate (-45deg); transform-origin: 0 100%; position: absolute; font-size: 20px; bottom :-. 5em; opacity: 0; transition: all 1 s memory-in. 2 s ;}. pic: hover span {opacity: 1; text-indent: 15em ;}

As shown in the implementation principle, the blue box represents the image box. top. We provide the oblique cutting effects for the image and the image box at the same angle in different directions, and only the image in the box is displayed.

In this way, we can achieve the triangle cropping effect of the image. Based on this principle, we can try different shapes. You are welcome to provide different implementation ideas.

That's all. Welcome to encouragement.

---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------