<div class="image">
  <img src="https://www.simplilearn.com/ice9/free_resources_article_thumb/what_is_image_Processing.jpg" alt="">
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  position: relative;
  z-index: 12;
  overflow: hidden;
  border-radius: 10px;
  width: 605px;
  height: 282px;
  transform: skewX(-30deg);
  transition: all 0.15s;

  img {
    position: absolute;
    left: 50%;
    width: 130%;
    height: 100%;
    object-fit: cover;
    transform: skewX(30deg) translateX(-50%);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.