#SmartCode
#SmartCode
  • 195
  • 498 374
Create a Smooth Image Slider on Hover with HTML & CSS | Step-by-Step Tutorial
#smartcode #csstutorial
Learn how to create a smooth image slider effect that changes on mouse hover using just HTML and CSS. In this beginner-friendly tutorial, I will walk you through every step to create an engaging sliding image gallery using simple CSS animations and transitions. This tutorial is perfect for those looking to enhance their website with interactive elements without using JavaScript.
🔍 What You’ll Learn:
Setting up HTML structure for the image slider.
Using CSS flexbox for layout management.
Adding hover effects with transition and transform.
Creating smooth sliding transitions for image sections.
📂 Code Overview:
HTML and CSS setup to create the sliding window effect.
How to style images and captions to make them look great.
How to use :hover to trigger smooth CSS animations.
📢 Don't forget to like, subscribe, and hit the bell icon to stay updated with more tutorials on web development!
💬 If you have any questions, leave them in the comments, and I’ll be happy to help. Enjoy coding!
มุมมอง: 74

วีดีโอ

CSS Flexbox Full Course | Flex Layout | Part 3
มุมมอง 157หลายเดือนก่อน
#smartcode #cssflexbox Welcome to the CSS Flexbox course. In this third and final part of this CSS Flexbox course w will create a responsive Flex layout. By the end of this video, you'll have a clear understanding of how to structure your layout with flex-containers, making your web designs more flexible and responsive. 👉 Hit like 👍 if you found this video helpful, and share it with your friend...
CSS Flexbox Full Course | Flex item properties | Part 2
มุมมอง 29หลายเดือนก่อน
#smartcode #cssflexbox Welcome to the CSS Flexbox course. In this secont video of my CSS Flexbox course I’ll cover and dive deep into flex-item properties. If you're new to Flexbox or want a solid foundation, this video is perfect for you! 🌟 Timestamps 00:00:00 Introduction and initial setup 00:03:23 Order property 00:06:52 flex-grow property 00:12:49 flex-shrink 00:18:50 flex-basis 00:27:53 al...
CSS Flexbox Full Course | Flex-container properties | Part 1
มุมมอง 133หลายเดือนก่อน
#smartcode #cssflexbox Welcome to the CSS Flexbox course. In this first video of my CSS Flexbox course I’ll cover the basics of Flexbox and dive deep into flex-container properties. If you're new to Flexbox or want a solid foundation, this video is perfect for you! 🌟 Timestamps 00:00:00 Course introduction 00:00:54 What is Flexbox? 00:02:42 Flexbox terminologies. 00:04:49 Flexbox properties. 00...
Mastering If-Statements in C# | Lecture 18 | Learn C Sharp Programming
มุมมอง 445 หลายเดือนก่อน
@smartcode9021 #csharp C Sharp tutorial for beginners Description: ⭐️ Lecture: 18 In this video, we dive into the fundamentals and variations of if-statements, a crucial part of C# programming. Whether you’re a beginner or looking to brush up on your skills, this video has something for you. 🚀 What You Will Learn: 1. Basic if-statements 2. if-else statements 3. Nested if-statements 4. else-if l...
Understanding Logical Operators in C# - AND, OR, NOT | Lecture 17 | Learn C Sharp Programming
มุมมอง 345 หลายเดือนก่อน
@smartcode9021 #csharp C Sharp tutorial for beginners ⭐️ Lecture: 17 ⭐️ We dive deep into the fundamental concepts of logical operators in C#. Understanding these operators is crucial for making decisions in your code. Whether you’re a beginner or brushing up on your skills, this tutorial will help you master logical AND, OR, and NOT operators. ⭐️ What You’ll Learn: ⭐️ Logical AND (&&): How to ...
Relational operators in C Sharp | Lecture 16 | Learn C Sharp Programming
มุมมอง 226 หลายเดือนก่อน
@smartcode9021 #csharp C Sharp tutorial for beginners ⭐️ Lecture: 16 ⭐️ Relational operators in programming is where the logical coding starts. So from now on you will start coding logics using relational operators in C#. In coming lectures you will learn another set of operations which is called logical operators. These operators define logics in a program but the decision is made by another t...
10 JavaScript DOM manipulation tasks for beginners | JavaScript tutorial
มุมมอง 9239 หลายเดือนก่อน
#jsdom #javascript Learn to manipulate the Document Object Model. You need to have some basic knowledge of JavaScript and DOM. If you have no idea what document object model is and how do we manipulate it you can simply take my crash course on it. You can find the link down blow in the description. 10 different tasks: 00:00:00 Introduction 00:03:06 (1) Read textbox value in Javascript 00:05:13 ...
Dice Roll JavaScript | JavaScript tutorial
มุมมอง 9209 หลายเดือนก่อน
#smartcode #js #javascript 00:00:00 HTML 00:05:12 CSS 00:15:11 JS So my dear here is a tutorial rolling the dices using html, css and javascript. We will develop this interesting application from scratch and I will show as well describe all the concepts you need to know to understand the entire development. The application can be used in many dice related student projects. Using javascript we w...
Program number pad in JavaScript | JavaScript tutorials
มุมมอง 551ปีที่แล้ว
​ @smartcode9021 #javascript #javascripttutorials 🔔 SUBSCRIBE 🔔 / @smartcode9021 Description: In this tutorial you will learn to code a number pad in JavaScript. We will try to write good and effective cod that you can use in your assignment and projects. Your instruction in this video is Salar Asker Zada
DOM events | Lecture 8 | JavaScript DOM
มุมมอง 99ปีที่แล้ว
JavaScript DOM Full Course | Document Object Model JavaScript | DOM Manipulation in #javascript Complete Course #javascriptdom #javascripttutorials #javascriptcourse ❤️ LIKE, SUBSCRIBE AND COMMENT Lecture 8: DOM events: In this final lecture you will now practically implement all the changes via DOM events. Events can be coded in three different ways, 1. Inline events, 2. property events, 3. ev...
Modify CSS via DOM | Lecture 7 | JavaScript DOM
มุมมอง 53ปีที่แล้ว
JavaScript DOM Full Course | Document Object Model JavaScript | DOM Manipulation in #javascript Complete Course #javascriptdom #javascripttutorials #javascriptcourse ❤️ LIKE, SUBSCRIBE AND COMMENT Lecture 7 : CSS via DOM: Via DOM you can even change, add and modify CSS. For applying the CSS DOM provides a property named style. In this lecture you will learn to work with the style property. The ...
Manage classes in DOM | Lecture 6 | JavaScript DOM
มุมมอง 58ปีที่แล้ว
JavaScript DOM Full Course | Document Object Model JavaScript | DOM Manipulation in #javascript Complete Course #javascriptdom #javascripttutorials #javascriptcourse ❤️ LIKE, SUBSCRIBE AND COMMENT Lecture 6: Manage classes in DOM. In this lecture you will learn to add, remove and change classes via DOM. DOM provides a classList property which contains many useful method. The course is divided i...
Manipulate attributes in DOM | Lecture 5 | JavaScript DOM
มุมมอง 130ปีที่แล้ว
JavaScript DOM Full Course | Document Object Model JavaScript | DOM Manipulation in #javascript Complete Course #javascriptdom #javascripttutorials #javascriptcourse ❤️ LIKE, SUBSCRIBE AND COMMENT Lecture 5: Manipulate attributes: In lecture 5 you will learn to work with the attributes. Attributes are also nodes in the DOM tree and you will learn to get and set attributes as well as check for a...
Make changes to the DOM | Lecture 4 | JavaScript DOM
มุมมอง 108ปีที่แล้ว
JavaScript DOM Full Course | Document Object Model JavaScript | DOM Manipulation in #javascript Complete Course #javascriptdom #javascripttutorials #javascriptcourse ❤️ LIKE, SUBSCRIBE AND COMMENT Lecture 4: Make changes to the DOM: Its now time to start manipulating the DOM. In this lecture you will learn the following, 1. How to create new nodes. 2. How to add new nodes to the DOM tree. 3. Ho...
DOM traversal | DOM selection | Lecture 3 | JavaScript DOM
มุมมอง 114ปีที่แล้ว
DOM traversal | DOM selection | Lecture 3 | JavaScript DOM
How to select HTML | DOM selection | Lecture 2 | JavaScript DOM
มุมมอง 159ปีที่แล้ว
How to select HTML | DOM selection | Lecture 2 | JavaScript DOM
What is DOM and where is DOM | Lecture 1 | JavaScript DOM
มุมมอง 139ปีที่แล้ว
What is DOM and where is DOM | Lecture 1 | JavaScript DOM
About the course on DOM | Lecture 0 | JavaScript DOM
มุมมอง 192ปีที่แล้ว
About the course on DOM | Lecture 0 | JavaScript DOM
JavaScript DOM: A beginners friendly course on DOM manipulation | full course
มุมมอง 1.5Kปีที่แล้ว
JavaScript DOM: A beginners friendly course on DOM manipulation | full course
Increment and decrement counter in C Sharp | Lecture 15 | Learn C Sharp Programming
มุมมอง 59ปีที่แล้ว
Increment and decrement counter in C Sharp | Lecture 15 | Learn C Sharp Programming
Arithmetic assignment operators in C Sharp | Lecture 14 | Learn C Sharp Programming
มุมมอง 33ปีที่แล้ว
Arithmetic assignment operators in C Sharp | Lecture 14 | Learn C Sharp Programming
Get input with ReadLine() method in C Sharp | Lecture 13 | Learn C Sharp Programming
มุมมอง 102ปีที่แล้ว
Get input with ReadLine() method in C Sharp | Lecture 13 | Learn C Sharp Programming
How to get help from C Sharp Docs| Lecture 12 | Learn C Sharp Programming
มุมมอง 35ปีที่แล้ว
How to get help from C Sharp Docs| Lecture 12 | Learn C Sharp Programming
Math class in C Sharp | Lecture 11 | Learn C Sharp Programming
มุมมอง 49ปีที่แล้ว
Math class in C Sharp | Lecture 11 | Learn C Sharp Programming
Arithmetic operators in C Sharp | Lecture 10 | Learn C Sharp Programming
มุมมอง 28ปีที่แล้ว
Arithmetic operators in C Sharp | Lecture 10 | Learn C Sharp Programming
Constant fields in C Sharp | Lecture 9 | Learn C Sharp Programming
มุมมอง 23ปีที่แล้ว
Constant fields in C Sharp | Lecture 9 | Learn C Sharp Programming
Output variables and string interpolation in C Sharp | Lecture 8 | Learn C Sharp Programming
มุมมอง 26ปีที่แล้ว
Output variables and string interpolation in C Sharp | Lecture 8 | Learn C Sharp Programming
Output variables with string concatenation | Lecture 7 | Learn C Sharp Programming
มุมมอง 51ปีที่แล้ว
Output variables with string concatenation | Lecture 7 | Learn C Sharp Programming
Variables and data types in C Sharp | Lecture 6 | Learn C Sharp Programming
มุมมอง 17ปีที่แล้ว
Variables and data types in C Sharp | Lecture 6 | Learn C Sharp Programming

ความคิดเห็น

  • @schmikemilok
    @schmikemilok ชั่วโมงที่ผ่านมา

    exactly what i needed, thank you.

    • @smartcode9021
      @smartcode9021 29 นาทีที่ผ่านมา

      You're welcome!

  • @somphavanhthoummavong9277
    @somphavanhthoummavong9277 7 ชั่วโมงที่ผ่านมา

    thank you so much

    • @smartcode9021
      @smartcode9021 29 นาทีที่ผ่านมา

      You're welcome!

  • @SH-pd5cs
    @SH-pd5cs 9 วันที่ผ่านมา

    thank you!!

    • @smartcode9021
      @smartcode9021 9 วันที่ผ่านมา

      You're welcome!

  • @nedasadatmousavi2729
    @nedasadatmousavi2729 11 วันที่ผ่านมา

    i try this but it doesnt work

    • @smartcode9021
      @smartcode9021 9 วันที่ผ่านมา

      What is not working? check the cosole for the error. It should work.

  • @PhilippBayer
    @PhilippBayer 16 วันที่ผ่านมา

    super, thx very much , abo

  • @cyrusfavour
    @cyrusfavour 29 วันที่ผ่านมา

    It is blurry sorry to say I couldn't see anything

    • @smartcode9021
      @smartcode9021 29 วันที่ผ่านมา

      That is true. It was a long time ago and I was inexperience about how to make a film for the TH-cam.

  • @BillBrutzman
    @BillBrutzman หลายเดือนก่อน

    Super job _ crystal clear _ very helpful and much appreciated.

    • @smartcode9021
      @smartcode9021 หลายเดือนก่อน

      Great to hear!

  • @mahasalim4115
    @mahasalim4115 หลายเดือนก่อน

    Mycket användbar info. Tack!

  • @NTSoftware
    @NTSoftware 2 หลายเดือนก่อน

  • @ismaeladriannnn
    @ismaeladriannnn 2 หลายเดือนก่อน

    Hi, I am working with ReactJs but the left-right alignment is not working for me regarding my code I developed. Who could help me out? Thanks

  • @AnnaIlieva-gp3dh
    @AnnaIlieva-gp3dh 2 หลายเดือนก่อน

    Problem: System.ComponentModel.Win32Exception (2): The system cannot find the file specified. Solution: using System.Diagnostics; ProcessStartInfo psi = new ProcessStartInfo { FileName = "www.google.com/", UseShellExecute = true }; Process.Start(psi); Explanation: In .NET Core and .NET 5+, Process.Start() no longer automatically opens URLs in the default web browser unless explicitly specified.

  • @vorapobautomation9760
    @vorapobautomation9760 2 หลายเดือนก่อน

    How to open folder that have .csv file inside after that can edit data in .csv file then save it and click select at the .csv file and click open at the open folder in order to send this file to show data in datagridview ?

  • @vorapobautomation9760
    @vorapobautomation9760 2 หลายเดือนก่อน

    How to use template button at the top of every page in order to change page and it have main page when open .exe file ?

  • @revy5653
    @revy5653 2 หลายเดือนก่อน

    why is my professor over complicating something so logical and simply explained? Thank you sir for letting me understand. Tell my professor to up his game.

    • @smartcode9021
      @smartcode9021 2 หลายเดือนก่อน

      A professor is a professor :)

  • @M-oy8gk
    @M-oy8gk 3 หลายเดือนก่อน

    Thanks, sir.

  • @yashparikh8220
    @yashparikh8220 3 หลายเดือนก่อน

    thank you for the tutorial i have one doubt how to keep the text forever faded out

  • @davarelawaliyansyah574
    @davarelawaliyansyah574 3 หลายเดือนก่อน

    Thank you

  • @armuc6941
    @armuc6941 3 หลายเดือนก่อน

    your method is not recommended, your classe form and your global variable are not protected, so you can't to realise a great programme with your static method, because the satiic make your classe fragile

  • @vjyothsnapriya
    @vjyothsnapriya 4 หลายเดือนก่อน

    good afternoon sir please help me sir 10101111 ki write program in visual studio C#

  • @gerakore8948
    @gerakore8948 4 หลายเดือนก่อน

    its not a good idea to set pixel data in the mouse move event. the data is static and there no reason to keep refilling it.

  • @jigs_traveller
    @jigs_traveller 4 หลายเดือนก่อน

    Thank u ☺️

  • @flakesnow492
    @flakesnow492 4 หลายเดือนก่อน

    it doesn't work in c++ winform qq

  • @pushpindersharma4880
    @pushpindersharma4880 4 หลายเดือนก่อน

    can you give the whole code in the description? great video by the way

  • @Ashutosh_Kumar03
    @Ashutosh_Kumar03 4 หลายเดือนก่อน

    Thank You so much sir

  • @enowdalintin8986
    @enowdalintin8986 4 หลายเดือนก่อน

    Thanks a lo. Have been looking for this solution

  • @pedrodavi_05
    @pedrodavi_05 4 หลายเดือนก่อน

    Bacana demais mano, muito bom!!!

  • @outrageousthoughts-kj4cm
    @outrageousthoughts-kj4cm 5 หลายเดือนก่อน

    Thanks a lot! I was searching for this type of tutorial for a very long time!

  • @ARULVENDHAN-up8fq
    @ARULVENDHAN-up8fq 5 หลายเดือนก่อน

    Thank anna. in English very thanks bro ❤

  • @ARULVENDHAN-up8fq
    @ARULVENDHAN-up8fq 5 หลายเดือนก่อน

    Excellent performance

  • @CG1BEATS
    @CG1BEATS 5 หลายเดือนก่อน

    can do tutorial about DataGridView just like this sir?

  • @richardmarkham8369
    @richardmarkham8369 5 หลายเดือนก่อน

    So easy! Spent ages trying different ways I saw on forums, none of which worked. Thanks!

  • @RalfTech-Ali
    @RalfTech-Ali 6 หลายเดือนก่อน

    How do you drag and drop a picturebox image, into file (explorer)?

  • @nguyenphihung6751
    @nguyenphihung6751 6 หลายเดือนก่อน

    Thank you for your video. Very clear and details and this is a wonderful video that I have been watching. <3

    • @smartcode9021
      @smartcode9021 6 หลายเดือนก่อน

      Glad you enjoyed it!

  • @doraivetterivero2741
    @doraivetterivero2741 6 หลายเดือนก่อน

    Great!!!! Thank you 🙂🙂

    • @smartcode9021
      @smartcode9021 6 หลายเดือนก่อน

      You're so welcome!

  • @iqranoor9858
    @iqranoor9858 6 หลายเดือนก่อน

    im trying to make buttons in form2 but its not showing after runnig??

  • @rajatkushwaha2034
    @rajatkushwaha2034 7 หลายเดือนก่อน

    Love u sir thank you so much

    • @smartcode9021
      @smartcode9021 6 หลายเดือนก่อน

      So nice of you

  • @TheObaby18
    @TheObaby18 7 หลายเดือนก่อน

    🤝🏿

  • @anushkakharat1387
    @anushkakharat1387 8 หลายเดือนก่อน

    Thankyou 🎉

  • @acediakiana8541
    @acediakiana8541 8 หลายเดือนก่อน

    thank you for the video not only for the tutorial, but also the explanation

    • @smartcode9021
      @smartcode9021 6 หลายเดือนก่อน

      Glad you liked it!

  • @chaosdragon9207
    @chaosdragon9207 8 หลายเดือนก่อน

    when do you continue with the c# lecture?

  • @mansouralshamri1387
    @mansouralshamri1387 8 หลายเดือนก่อน

    Why not margin: auto; why 0 auto?

  • @IrvingPeñaRamirez
    @IrvingPeñaRamirez 8 หลายเดือนก่อน

    Ty that was simple but can help me so much

    • @smartcode9021
      @smartcode9021 8 หลายเดือนก่อน

      cool it helped

  • @hamzaabu-othman8044
    @hamzaabu-othman8044 8 หลายเดือนก่อน

    good job

  • @sugamsingh5213
    @sugamsingh5213 9 หลายเดือนก่อน

    Very useful video thank you!

    • @smartcode9021
      @smartcode9021 6 หลายเดือนก่อน

      Glad it was helpful!

  • @sobkhed1716
    @sobkhed1716 9 หลายเดือนก่อน

    thanks a lot man

    • @smartcode9021
      @smartcode9021 6 หลายเดือนก่อน

      You're welcome!

  • @abigailreyes4906
    @abigailreyes4906 9 หลายเดือนก่อน

    Thank you!

    • @smartcode9021
      @smartcode9021 9 หลายเดือนก่อน

      You're welcome!

  • @swaroopburiga1152
    @swaroopburiga1152 9 หลายเดือนก่อน

    What if i have to give single letter capital in the beginning of the paragraph??

    • @smartcode9021
      @smartcode9021 9 หลายเดือนก่อน

      check ::first-letter CSS pseudo-element

  • @VargasForth
    @VargasForth 9 หลายเดือนก่อน

    great video can you do ajax and json tutorials please and how to manipulate the js into database thank you so much.

    • @smartcode9021
      @smartcode9021 9 หลายเดือนก่อน

      Great suggestion! Ajax is dying. I have plan for JavaScript JSON.

    • @VargasForth
      @VargasForth 9 หลายเดือนก่อน

      @@smartcode9021 copy thank you so much @smartcode9021 cant wait to learn again from you.

  • @Underaluckystarobv
    @Underaluckystarobv 9 หลายเดือนก่อน

    Thank you so much, you are simple and fast, you fixed my problem with div's and pic's 🎉🎉🎉

    • @smartcode9021
      @smartcode9021 9 หลายเดือนก่อน

      Glad I could help!