This article introduces a very interesting feature that uses pure CSS to make use of resize for a powerful image toss-up preview. Something like this:

Train of thought

First of all, there are a lot of ways to achieve this effect if you don’t need to be able to drag.

  1. Overlay the two pictures together
  2. Change the width of the top image, or use a mask and change the opacity of the mask

Just a little bit of a hint either way.

Let’s say we have the following structure, using background to show two images:

<div class="g-outer">
    <div class="g-inner"></div>
</div>
Copy the code

Method 1, the way to change the width of the upper image:

.g-outer {
    width: 650px;
    height: 340px;
    background-image: url(image1.png);
    overflow: hidden;
}
.g-inner {
    height: 340px;
    background: url(image2.png);
    animation: widthchange 3s infinite alternate linear;
}
.mask-change {
    mask: linear-gradient(90deg.#fff 0%.#fff 50%, transparent 50%, transparent 100%);
    mask-size: 200% 100%;
    animation: maskChange 3s infinite alternate linear;
}
@keyframes widthchange {
    0% {
        width: 650px;
    }
    100% {
        width: 0px; }}Copy the code

The effect is as follows:

Of course, a similar effect can be achieved very easily using a mask:

.g-outer {
    background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);
}
.g-inner {
    background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);
    mask: linear-gradient(90deg.#fff 0%.#fff 50%, transparent 50%, transparent 100%);
    mask-size: 200% 100%;
    animation: maskChange 2s infinite alternate linear;
}
@keyframes maskChange {
    0% {
        mask-position: -100% 0;
    }
    100% {
        mask-position: 0 0; }}Copy the code

You can get the same effect:

CodePen DEMO — Switch Picture

For those of you who are not yet familiar with the powerful mask attribute, you can poke: the wonderful CSS mask

Use resize for drag and drop

The next step is the core, the most critical step, using the CSS resize attribute to achieve drag-and-drop control of the width of the element.

What is theresize ？

Resize: This property allows you to control the size of an element

The syntax is as follows:

{
/* Keyword values */
  resize: none;
  resize: both;
  resize: horizontal;
  resize: vertical;
  resize: block;
  resize: inline;
}
Copy the code

Here’s a simple DEMO:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>
Copy the code
p {
    width: 200px;
    height: 200px;
    resize: horizontal;
    overflow: scroll;
}
Copy the code

Here, we set a width of 200px

for the horizontal drag-and-change width. The effect is as follows:

A few simple tips:

  • resizeEffective, need to cooperateoverflow: scroll
  • We can go throughresize 的 horizontal,vertical,bothTo set drag horizontally, drag vertically, drag horizontally and vertically.
  • Can be used with containersmax-width,min-width,max-height,min-heightLimits a range of drag-and-drop changes

Use resize to drag and drop images

OK, next, let’s use resize to drag and drop images.

First, again, let’s try resize on the child element:

<div class="g-outer">
    <div class="g-inner width-change"></div>
</div>
Copy the code
.g-outer {
    width: 650px;
    height: 340px;
    background-image: url(image1.png);
    overflow: hidden;
}

.g-inner {
    height: 340px;
    background: url(image2.png);
    resize: horizontal;
    overflow: scroll;
    max-width: 640px;
    min-width: 10px;
}
Copy the code

As you can see, g-inner is set to REsize: Horizontal, which will allow it to be dragged horizontally. The actual effect is as follows:

Well, very close, because it needs to cooperate with overflow: Scroll, so there is an annoying scroll bar, very ugly, we have to find a way to kill the scroll bar.

The scrollbar is hidden by means of one more layer of nesting and absolute positioning

There are many ways to hide the scroll bar, but here’s a clever way to do it. Let’s change our structure by adding an extra div layer:

<div class="g-outer">
    <div class="g-inner">
        <div class="g-resize"></div>
    </div>
</div>
Copy the code

We give the drag-and-drop function to g-resize, which changes the width of the element, and the g-inner changes to the absolute position. When the g-resize width increases, the parent g-inner also increases. Finally, set the opacity of G-resize to 0 to hide the scroll bar.

The core code is as follows:

.g-outer {
    position: relative;
    width: 650px;
    height: 340px;
    background-image: url(image1.png);
    overflow: hidden;
}
.g-inner {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 0;
    max-width: 650px;
    height: 340px;
    background-image: url(image2.png);
}
.g-resize {
    position: relative;
    resize: horizontal;
    overflow: scroll;
    width: 0;
    height: 340px;
    max-width: 650px;
    min-width: 15px;
    animation: opacityChange 3s infinite alternate linear;
}
@keyframes opacityChange {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1; }}Copy the code

Here, I’ve set the opacity to be a blur, just to make it easy to scroll:

Display a drag bar with pseudo elements

Finally, since the scroll bar is completely hidden from the user, we need to draw a more attractive drag bar. Here we continue with the above layout and add another pseudo-element to the.g-inner, positioned absolutely at the end of the element:

.g-inner:before {
    content: "↔";
    position: absolute;
    background: rgba(0.0.0.0.5);
    top: 0;
    right: 0;
    height: 100%;
    line-height: 340px;
}
Copy the code

The result is perfect:

The full detailed code, you can see in my CSS inspiration:

CSS inspiration – the use of resize to achieve the image switch preview function

To summarize

In this article, you can learn:

  • Resize is used to control the size of the container
  • There are some clever ways to hide the less beautiful scrollbar
  • And with some of the skills mentioned above, using pure CSS to achieve the image drag and drop preview function

The last

Ok, this article is over, hope to help you 🙂

Want to Get the most interesting CSS information, do not miss my public number – iCSS front-end interesting 😄

More wonderful CSS effects can pay attention to my CSS inspiration

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.