Hover effect with diagonal movement

I'm attempting to recreate the unique diagonal arrow animation featured on this website:

For reference, here is a small boilerplate: https://jsfiddle.net/randal923/x0ywchq5/8/

Any advice on the best way to position and animate the arrow would be greatly appreciated. Thank you!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="./css/style.css"
    />
  </head>
  <body>
    <div class="grid">
      <div class="grid__project">
        <img
          src="https://tympanus.net/Development/HoverEffectIdeas/img/17.jpg"
          alt="img17"
          class="grid__project-image"
        />
        <div class="grid__project-icons">
          <i class="fas fa-chevron-up grid__project-icons--1"></i>
          <i class="fas fa-chevron-up grid__project-icons--2"></i>
        </div>
        <div class="grid__project-icons">
          <i class="fas fa-chevron-up grid__project-icons--3"></i>
          <i class="fas fa-chevron-up grid__project-icons--4"></i>
        </div>
      </div>
    </div>
  </body>
</html>


  .grid {
  display: flex;
  flex-wrap: wrap;

  &__project {
    position: relative;
    margin: 1rem;

    &-image {
      height: 20rem;
      border-radius: 0.3rem;
      box-shadow: 0 5px 2rem rgba(0, 0, 0, 0.3);
    }

    &-icons {
      display: flex;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      font-size: 1.5rem;

      &--1 {
      }

      &--2 {
        margin-left: 90%;
      }
      &--3 {
        margin-top: 70%;
      }
      &--4 {
        margin-left: 90%;
        margin-top: 70%;
      }
    }
  }
}
css

Answer №1

One clever technique involves utilizing multiple backgrounds to form an arrow, then animating the position origin for the desired effect:

.box {
  width:200px;
  height:200px;
  padding:20px;
  box-sizing:border-box;
  background:
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) top right,
      linear-gradient(#000,#000) top right,
  red;
  background-size:20px 2px,2px 20px;
  background-origin:content-box;
  background-repeat:no-repeat;
  transition:0.3s all;
}
.box:hover {
  padding:5px;
}
<div class="box">

</div>

Alternatively, you can use an image as the background:

.box {
  width:200px;
  height:200px;
  position:relative;
  background: url(https://picsum.photos/800/600?image=1069) center/cover;
}

.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:20px;
  background:
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) top left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom left,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) bottom right,
      linear-gradient(#000,#000) top right,
      linear-gradient(#000,#000) top right;
  background-size:20px 2px,2px 20px;
  background-origin:content-box;
  background-repeat:no-repeat;
  transition:0.3s all;
}
.box:hover:before {
  padding:5px;
}
<div class="box">

</div>

Answer №2

Give this code a shot, I believe it could be quite helpful for your needs.

* {
  margin:0;
  padding:0;
}

body {
  background:#ccc;
  font-family: arial,verdana,tahoma;
}

.animation {
  width: 705px;
  height: 333px;
  overflow:hidden;
  
  margin: 100px auto;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0px 8px 6px -6px black;
}
/* .animation ul {
  
} */
.animation li {
  position: relative;
  display:block;
  width:140px;
  float: left;
  
  border-left: 1px solid #888;
  -webkit-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 0 25px 10px rgba(0,0,0,0.5);
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


.animation ul:hover li {
  width: 50px;
}

.animation ul li:hover {
  width:500px;
}

.animation li img {
  display: block;
}

.image_title {
  background: rgba(0,0,0,0.5);
  position:absolute;
  left:0;
  bottom:0;
  width:500px;
}

.image_title a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding:20px;
  font-size:16px;
}
<div class="animation">
  <ul>
    <li>
      <div class="image_title">
        <a href="#">Wedding 1</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3667/9759830873_7474bd9fc2.jpg">
</a>
    </li>
       <li>
      <div class="image_title">
        <a href="#">Wedding 2</a>
      </div>
      <a href="#">
     <img src="http://farm8.staticflickr.com/7435/10067483716_2b6a593ca8.jpg">
</a>
    </li>
          <li>
      <div class="image_title">
        <a href="#">Wedding 3</a>
      </div>
      <a href="#">
     <img src="http://farm8.staticflickr.com/7310/10065811936_8debcccb71.jpg">
</a>
    </li>
             <li>
      <div class="image_title">
        <a href="#">Wedding 4</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3715/10065692306_705364fa01.jpg">
</a>
    </li>
                <li>
      <div class="image_title">
        <a href="#">Wedding 5</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3667/9759830873_7474bd9fc2.jpg">
</a>
    </li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider? <div class="col-12 box-container"> <div class=" ...

c#htmlcss.net

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4. The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB Code Snippet: <div class="main-wrapper col- ...

javascripthtmlcsstwitter-bootstrap

supplying various color variables to a single class

I am working on a webpage with multiple elements sharing the same CSS class. I want each element to have a unique background color, but I don't want to create a bloated CSS file. Is there a way to achieve this by adding a parameter in my HTML like cla ...

css

How can I retrieve the background and border color of the focused HTML element after pressing the tab on a website?

I am seeking to automate the process of conducting website accessibility checks by analyzing the color contrast between the focused element (after pressing tab) and its border color. Strategy: Initially, I attempted to take screenshots of the entire web ...

htmlcssgoogle-chromemachine-learningcomputer-vision

Box-sizing:border-box causing CSS padding problem in Firefox

Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing. Here's the CSS for the body tag: html, body { width: 100%; } body { padding: 5% 10% 0 10%; ...

cssfirefoxpaddingborder-box

React's Material-UI AppBar is failing to register click events

I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...

javascripthtmlcssreactjsmaterial-ui

D3 Chart: What is the best way to insert images into a node?

Within the jsFiddle demo provided in this query, there is code displayed. I am curious about how I can assign images to each node. var graph = { "nodes":[ {"name":"1","rating":90,"id":2951}, ] } You can access my jsFiddle Demo through this ...

javascriptjquerycssd3.js

"Enhancing Your Website with Dynamic CSS3 Div Animations

Seeking assistance in displaying an empty div after a CSS3 Animations loading circle has completed. Any guidance is welcome! jsFiddle ...

htmlcss

What steps can be followed to incorporate a loading gif into this popup and subsequently eliminate it?

These simple inquiries are starting to get on my nerves. I can't keep waiting around for my website designer to resolve this issue. It shouldn't be that difficult... I managed to figure out most of it by researching similar questions, but I could ...

jquerycssloadinganimated-gif

The canvas map has an unseen boundary on the right, causing all other div sections to be

When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...

htmlcsscanvasmaps

The process of transforming four columns into two columns and two rows

I am aiming to create a layout that displays 4 columns on desktop and then breaks down into 2 columns and 2 rows on smaller screens. https://i.stack.imgur.com/GZ4nQ.png https://i.stack.imgur.com/5ZCrQ.png Any suggestions on how I can achieve this layout ...

twitter-bootstrapcss

JavaScript scrollable selection menu with a favorite option button

I am looking to enhance a standard select element by adding a favorite button that can be toggled on and off for each option. Utilizing Bootstrap for styling, I want to create a user interface element that allows for smooth scrolling through the options an ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing Multiple Shared Footers in Rails 3

Looking for a solution to display unique footers in Rails? For instance, displaying one footer on the homepage and another footer on the rest of the site. Has anyone successfully implemented this before? I was considering using an if statement based on th ...

cssruby-on-rails-3footer

Looking to modify the styling of links in an unordered list?

Let me explain what I attempted to accomplish CSS: li:nth-child(2n) { background-color:gray; } HTML: <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> ...

htmlcss

Mistake in the hovering positioning within the WordPress theme

I've encountered a hover issue on my website that I'm trying to resolve. Every time I hover over a product, the product description appears underneath it instead of on top, and I can't seem to find a solution: The site is using the sentient ...

csswordpress

Creating a scrollable card layout specifically for small screens in HTML

I am looking to implement a horizontal scroll (for small screens only) within my card layout so that all cards are displayed in a single row. Here is an example: For small screens: https://i.sstatic.net/5eWyV.png So far, I have added horizontal scrolling ...

htmlcssscroll

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

input[type="search"] doesn't seem to be functioning properly on IE9 and below. Any ideas on how to fix it would be greatly appreciated. Here is a screenshot for reference: .search-form .row input[type="search"] { color:#9fa0a0; font-size:20 ...

htmlcss

Tips for placing the brand logo on the left edge of the Bootstrap 4 navbar

I am facing an issue with the placement of my logo. The code snippet below shows how it currently looks: <nav class="navbar navbar-fixed-top navbar-light bg-primary"> <div class="container-fluid"> <img class="navbar-brand" src="logo.p ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with multiple dropdowns not functioning in Bootstrap 5

Before you criticize my imports, here are the scripts I am using: <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script ...

htmlcsstwitter-bootstrapbootstrap-5

Adjusting the alignment of button text in an Angular Kendo grid

I am currently utilizing the grid view feature of Kendo UI for Angular. While I have buttons on the grid, the issue is that the text within the buttons is not centered properly despite applying styles such as text-align:center. Here is the template for my ...

cssangularkendo-ui