Ενα εντυπωσιακό κομψό widget με μοναδικά εφέ

Αυτός ο κώδικας HTML/CSS δημιουργεί ένα widget με τα εξής χαρακτηριστικά: Αυτός ο κώδικας θα προκαλέσει ένα ζουμ εφέ στη φωτογραφία όταν ο χρήστης πε


Αυτός ο κώδικας HTML/CSS δημιουργεί ένα widget με τα εξής χαρακτηριστικά:

DEMO LIVE


Αυτός ο κώδικας θα προκαλέσει ένα ζουμ εφέ στη φωτογραφία όταν ο χρήστης περνάει το ποντίκι πάνω από αυτήν, αλλά αυτή τη φορά η μετάβαση θα διαρκέσει 2 δευτερόλεπτα. Μπορείτε να προσαρμόσετε τη διάρκεια της μετάβασης στην τιμή που επιθυμείτε ανάλογα με την προτίμησή σας.

Μπορείτε να προσαρμόσετε τον κώδικα και τα χαρακτηριστικά του στοιχείου σύμφωνα με τις προτιμήσεις και το στιλ του ιστότοπού σας.

Αποκλειστικά από το FoulsCode για το site η το blog σας! Θα συνεχίσουμε να δημιουργούμε κώδικα για εσάς!


<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Unique Zoom Effect with Link</title>
<style>
  /* CSS Code */
  .unique-image {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    cursor: pointer;
  }

  .unique-image img {
    width: 100%;
    height: 100%;
    transition: transform 2s ease; /* Προσθήκη μεγαλύτερης διάρκειας μετάβασης */
  }

  .unique-image:hover img {
    transform: scale(1.2); /* Αύξηση του μεγέθους κατά 20% */
  }

  .unique-image .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .unique-image:hover .overlay {
    opacity: 1;
  }

  .unique-image .overlay a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
  }
</style>
</head>
<body>

<div class="unique-image">
  <img alt="Unique Image" src="https://via.placeholder.com/300x200" />
  <div class="overlay">
    <a href="https://www.example.com">Click Me</a>
  </div>
</div>

</body>
Κατηγορίες:
Σχόλια