Before and After Slider using CSS... Unable to Re-size image lesser than the Initial Width

Question

I am developing a WP website and it was migrated from a HTML code. So, I am having a hard time using the plugins in WP.

I search and found a way to have BEFORE & AFTER functionality just using CSS. It works and I am happy about it.

This is the place I found it:

http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/

OUTPUT:

NOW i want to tweak it a little bit...

Okay.. So now.. If I change the ( .image-slider > div ) width to 200px.

.image-slider > div {
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 200px;
      max-width: 100%;
      overflow: hidden;
      resize: horizontal;
    }

Output:

Below you will find the entire code and the link to snippet:

 /**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  padding: 5px;
  background: linear-gradient(-45deg, white 40%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

.image-slider img {
  user-select: none;
  max-width: 400px;
}

<div class="image-slider">
						
  <div>
						
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" />
						
  </div>
						
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" />
					
</div>

I need some help to Resize the BEFORE picture less than 200px.

Sorry for a long question. Thank you for time :)

---

I UPDATED MY CODE WITH FEW ADDITIONS & MEDIA QUERIES

<script type='text/javascript'>
							    			
  function mouseOver1() 
							    			
{						    				
    document.getElementById('pic1').style.width="700px";
								    			
  }
							    			
										
</script>

										
<script type='text/javascript'>
										    
  function mouseOverReset1() {
										    
  document.getElementById('pic1').style.width="15px";
										    }       
										
</script>

/**

* Title: Custom Style For Smile Gallery
* Author: Nick D' Curz
* Company: Nick Software Solutions
* URL:http://nicksoftwaresolutions.com;

*/



 
 @media screen and (min-width: 200px) 
    {

 /**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width:150px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
  -webkit-transition: width 1s; /* Safari */
    -webkit-transition-timing-function: linear; /* Safari */
    transition: width 1s;
    transition-timing-function: linear;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  padding: 5px;
  background: linear-gradient(-45deg, white 40%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

.image-slider img {
  user-select: none;
  max-width: 300px;
}

/*.image-slider > div:hover{
  width:25px;
}*/

}

@media screen and (min-width: 768px) 
    {

 /**
 * Image slider with pure CSS
 * Original version in http://demosthenes.info/blog/css
 */

.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

/* Could use a pseudo-element, but they’re currently
   super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */
.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width:350px;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
  -webkit-transition: width 1s; /* Safari */
    -webkit-transition-timing-function: linear; /* Safari */
    transition: width 1s;
    transition-timing-function: linear;
}

/* Cross-browser resizer styling */
.image-slider > div:before {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 40px; height: 40px;
  padding: 5px;
  background: linear-gradient(-45deg, white 40%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
  -webkit-filter: drop-shadow(0 0 2px black);
  filter: drop-shadow(0 0 2px black);
}

.image-slider img {
  user-select: none;
  max-width: 700px;
}

/*.image-slider > div:hover{
  width:25px;
}*/

}

<link href="http://www.example.com/wp-content/themes/blankslate/css/bootstrap.css" rel="stylesheet"/>
<!-- SMILE GALLERY SLIDER PICTURES STARTS HERE -->

							<!-- PICTURE 1 STARTS HERE -->

								<div style="text-align: center;">
						
									<div>

										<div class="image-slider">
											<div id="pic1">
											<img src="http://www.example.com/wp-content/uploads/2016/03/o1-b.jpg" />
											</div>
											<img src="http://www.example.com/wp-content/uploads/2016/03/o1-a.jpg" />
										</div>
							
										<span >
<a data-toggle="tooltip" title="Click" class="btn btn-warning pull-left" onclick="mouseOver1()" style="width:70px">Before</a></span> 
										<span >
<a data-toggle="tooltip" title="Click" class="btn btn-success pull-right" onclick="mouseOverReset1()" style="width:70px">After</a></span>
									</div>
										<br><br>
							
										
							</div>

							<!-- PICTURE 1 ENDS HERE -->

Answer 1

The only solution that I found is to add hover slector wich changes width of the div.

.image-slider > div:hover{ width:10px; }