Πώς να δημιουργήσετε ένα εφέ Hover εικόνας στο CSS

Τα εφέ αιώρησης εικόνας μπορούν να προσθέσουν ένα επιπλέον επίπεδο βερνίκι στον ιστότοπό σας. Δημιουργούν ένα ομαλό εφέ, κάνοντας τις γκαλερί εικόνων ή τα καρουσέλ πιο ευχάριστα στην πλοήγηση. Το καλύτερο μέρος είναι ότι μπορείτε να δημιουργήσετε αυτά τα εφέ μόνο με CSS και χωρίς JavaScript.

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

Δημιουργία HTML για τις Εικόνες

Ξεκινήστε δημιουργώντας ένα index.html αρχείο μέσα σε έναν κενό φάκελο στον υπολογιστή σας και, στη συνέχεια, ανοίξτε το αρχείο με ένα πρόγραμμα επεξεργασίας κειμένου. Μέσα στο αρχείο, δημιουργήστε τον σκελετό HTML και προσθέστε την ακόλουθη σήμανση μέσα στο αρχικό σώμα και τις ετικέτες σώματος κλεισίματος:

<divτάξη="πλέγμα">
<divτάξη="περιτύλιγμα εικόνας">
<imgτάξη="θολούρα"src=" https://picsum.photos/500?random=1"alt="">
<divτάξη="εξαφανίζεται το περιεχόμενο">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divτάξη="περιτύλιγμα εικόνας">
<imgτάξη="θόλωμα ζουμ"src=" https://picsum.photos/500?random=2"alt="">
<divτάξη="εξαφανίζεται το περιεχόμενο">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divτάξη="περιτύλιγμα εικόνας">
<imgτάξη="θολούρα"src=" https://picsum.photos/500?random=3"alt="">
<divτάξη="περιεχόμενο διαφάνεια προς τα αριστερά">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divτάξη="περιτύλιγμα εικόνας">
<imgτάξη="γκρί"src=" https://picsum.photos/500?random=3"alt="">
<divτάξη="περιεχόμενο διαφάνεια προς τα αριστερά">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

Αυτό είναι ένα πλέγμα κοντέινερ με τέσσερα περιτυλίγματα εικόνας. Τα στοιχεία div με το εικόνα-περιτύλιγμα class χρησιμεύει ως περιτύλιγμα για την εικόνα και το αντίστοιχο κείμενο. Η εικόνα και το περιεχόμενο κάθε ενότητας έχουν ένα μοναδικό σύνολο τάξεων που προστίθενται σε αυτό.

Μέσα στο φύλλο στυλ, θα στοχεύστε αυτά τα στοιχεία με τα ονόματα της τάξης τους και εφαρμόστε τα διάφορα εφέ styling και animation. Το κείμενο δεν θα εμφανίζεται από προεπιλογή. θα το εμφανίσετε μόνο όταν τοποθετήσετε το δείκτη του ποντικιού πάνω από το περιτύλιγμα εικόνας και η εικόνα θα υποστεί διαφορετικά εφέ κατά τη διαδικασία.

Προσθήκη Βασικού CSS

Τώρα που δημιουργήσατε το HTML, ήρθε η ώρα να το στυλίσετε με CSS. Δημιουργώ ένα στυλ.css αρχείο και σύνδεση σε αυτό το φύλλο στυλ από το αρχείο HTML, μέσα στο Ενότητα:

<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css">

Μέσα σου στυλ.css αρχείο, το πρώτο πράγμα που πρέπει να κάνετε είναι να μηδενίσετε το περιθώριο στο σώμα και να ορίσετε κάποιο κάτω περιθώριο:

σώμα {
περιθώριο: 0;
περιθώριο-κάτω: 20rem;
}

Στη συνέχεια, πρέπει να μετατρέψετε το πιο εξωτερικό δοχείο σε α Πλέγμα CSS που μπορείτε να χρησιμοποιήσετε για να τοποθετήσετε στοιχεία σε δύο διαστάσεις. Ο παρακάτω κώδικας δημιουργεί ένα πλέγμα με όσες στήλες ή σειρές χωρούν. Το ελάχιστο μέγεθος κάθε στήλης είναι 300 εικονοστοιχεία και το μέγιστο μέγεθος είναι 1 κλάσμα του κοντέινερ:

.πλέγμα {
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: επαναλαμβάνω(αυτόματη προσαρμογή, ελάχιστη μέγ(300px, 1fr));
}

Εφόσον θέλετε να τοποθετήσετε το κείμενο σε σχέση με το κοντέινερ του, πρέπει να ορίσετε τη θέση σε σχέση με το περιτύλιγμα εικόνας:

.εικόνα-περιτύλιγμα {
θέση: συγγενής;
ξεχείλισμα: κρυμμένος;
}

Το επόμενο βήμα είναι να διαμορφώσετε το στυλ της εικόνας. Εμφανίστε την εικόνα ως στοιχείο μπλοκ, κάντε την να καλύπτει το πλάτος ολόκληρου του κοντέινερ και τοποθετήστε την στο κέντρο του κοντέινερ:

.εικόνα-περιτύλιγμα > img {
απεικόνιση: ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ;
πλάτος: 100%;
αναλογία απεικόνισης: 1 / 1;
προσαρμογή αντικειμένου: κάλυμμα;
αντικείμενο-θέση: κέντρο;
}

Όσο για το κείμενο, τοποθετήστε το κεντρικά και δώστε ένα διαφανές, ανοιχτό γκρι χρώμα φόντου:

.εικόνα-περιτύλιγμα > .περιεχόμενο {
θέση: απόλυτος;
ένθεση: 0;
μέγεθος γραμματοσειράς: 2rem;
υλικό παραγεμίσματος: 1rem;
Ιστορικό: rgba(255, 255, 255, .4);
απεικόνιση: καλώδιο;
στοίχιση-στοιχεία: κέντρο;
δικαιολογώ-περιεχόμενο: κέντρο;
}

Αποθηκεύστε το αρχείο CSS και ανοίξτε index.html στο πρόγραμμα περιήγησής σας. Θα πρέπει να βρείτε μια σελίδα παρόμοια με αυτήν στην παρακάτω εικόνα.

Ρύθμιση της μετάβασης στις εικόνες και τα κείμενα

Τώρα που έχετε εφαρμόσει τα βασικά στυλ στις εικόνες, το επόμενο βήμα είναι να προσθέσετε κάποια κινούμενη εικόνα σε αυτές. Ξεκινήστε προσθέτοντας μια μετάβαση και στις δύο εικόνες και στο αντίστοιχο κείμενο τους:

.εικόνα-περιτύλιγμα > img,
.εικόνα-περιτύλιγμα > .περιεχόμενο {
μετάβαση: 200Κυρίαευκολία εισόδου;
}

Αυτό σημαίνει ότι όλα τα εφέ μετάβασης (δηλαδή fade-in, ζουμ και θόλωση) θα διαρκέσουν 200 χιλιοστά του δευτερολέπτου και θα έχουν την ίδια καμπύλη χρονισμού.

Fade-In και Blur Animation

Το πρώτο στυλ κινουμένων σχεδίων ξεθωριάζει στο κείμενο. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα συγκεκριμένο περιτύλιγμα εικόνας, το περιεχόμενο που έχει το ξεθωριάζει Η κλάση θα έχει αυτό το εφέ (κινούμενα σχέδια fade-in και fade-out) που θα εφαρμοστεί σε αυτήν. Αυτό επιτυγχάνεται ορίζοντας την αδιαφάνεια στο μηδέν και αλλάζοντας την σε ένα όταν ένα ποντίκι αιωρείται σε ένα συγκεκριμένο περιτύλιγμα εικόνας:

.εικόνα-περιτύλιγμα > .περιεχόμενο.ξεθωριάζει {
αδιαφάνεια: 0;
}
.εικόνα-περιτύλιγμα:φτερουγίζω > .περιεχόμενο.ξεθωριάζει {
αδιαφάνεια: 1;
}

Εάν αποθηκεύσετε το αρχείο και ελέγξετε το πρόγραμμα περιήγησής σας, θα δείτε το fade-in animation σε ισχύ. Αλλά μπορεί επίσης να παρατηρήσετε ότι το κείμενο είναι λίγο δύσκολο να διαβαστεί (αν η εικόνα είναι έντονη και έχει μεγάλη αντίθεση). Θυμηθείτε ότι όλες οι εικόνες έχουν επίσης όνομα τάξης θολούρα. Αυτό είναι για να θολώσετε τις εικόνες για να προσθέσετε κάποια απαραίτητη αντίθεση μεταξύ αυτών και του κειμένου:

εικόνα-περιτύλιγμα:φτερουγίζω > img.θολούρα {
φίλτρο: θολούρα(5px)
}

Τώρα, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, μπορείτε να δείτε ότι απλώς θα θολώσει. Μπορείτε να αυξήσετε την τιμή των pixel για να κάνετε το θάμπωμα πιο έντονο στις εικόνες, προσθέτοντας έτσι μεγαλύτερη αντίθεση μεταξύ αυτής και του κειμένου.

Προσθήκη άλλων εφέ

Τα άλλα εφέ είναι η ολίσθηση του κειμένου από τα αριστερά, η μεγέθυνση της εικόνας και η προσθήκη κλίμακας του γκρι στην εικόνα. Εδώ είναι ο κώδικας για την επίτευξη και των τριών αποτελεσμάτων:

.εικόνα-περιτύλιγμα > .περιεχόμενο.slide-αριστερά {
μεταμορφώνω: μετάφρασηΧ(100%)
}
.εικόνα-περιτύλιγμα:φτερουγίζω > .περιεχόμενο.slide-αριστερά {
μεταμορφώνω: μετάφρασηΧ(0%)
}
.εικόνα-περιτύλιγμα:φτερουγίζω > img.γκρί {
φίλτρο: κλίμακα του γκρι(1)
}
.εικόνα-περιτύλιγμα:φτερουγίζω > img.θολούρα {
φίλτρο: θολούρα(5px)
}
.εικόνα-περιτύλιγμα:φτερουγίζω > img.ανίπταμαι διαγωνίως {
μεταμορφώνω: κλίμακα(1.1)
}

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

Για να ολοκληρώσετε τα εφέ slide-in, μπορείτε να δημιουργήσετε τρία ακόμη περιτυλίγματα εικόνων, το καθένα να περιέχει μια εικόνα και κείμενο. Κάθε κομμάτι κειμένου θα έχει το όνομα της τάξης slide-up, γλιστρώ, ή ελαφρώς-δεξιά. Στη συνέχεια, θα μεταβιβάζατε την κατάλληλη τιμή pixel, em ή rem, μεσα στην μεταμορφώνω() λειτουργία για τη δημιουργία και των τριών εφέ.

CSS Grid και Flexbox

Το CSS Grid και το Flexbox είναι δύο χαρακτηριστικά που σας επιτρέπουν να δημιουργήσετε φανταστικές διατάξεις για τον ιστότοπό σας. Μπορείτε να δημιουργήσετε σχεδόν οποιαδήποτε διάταξη θέλετε με ευκολία και να προσαρμόσετε τις γραμμές και τις στήλες σύμφωνα με το γούστο σας. Οι στήλες θα ανταποκρίνονται επίσης από προεπιλογή. Το να μάθετε πότε να χρησιμοποιείτε το ένα έναντι του άλλου θα σας βοηθήσει να γίνετε κορυφαίος προγραμματιστής CSS κατά ένα τοις εκατό.