How can I set a default image in this slide show?


I created a slide show using HTML and CSS only following an example I saw elsewhere. It switches photos with the hover selector. How can I get the hover to stay on permamnently until I hover to another photo? How can I set a default picture to have the hover selector active? Something like this example, which I can't seem to fully adapt to my code:

This is the code:

<!DOCTYPE html>
      <link type="text/css"; rel="stylesheet"; href="SLideshow.css"/>
      <title>Untitled Document</title>
<div class="SlideShow">
      <img src="TheNorthFaceEcoGreen.jpg" class="Thumbnail">
        <img src="TheNorthFaceEcoGreen.jpg" class="LargeImage">
      <img src="PuenteAcelere.jpg" class="Thumbnail">
          <img src="PuenteAcelere.jpg" class="LargeImage">

With this styling:

<style type="text/css">
.LargeImage{width:42em; height:23.2em;border-radius:15px;}
.Thumbnail{width:10em; height:6em;}
.SlideShow{width:42em;height:33.2em;overflow:hidden; border:solid black 2px;}
.SlideShow>ul>li{display:inline;margin:0em;padding:0em;font-size:1em;margin-    right:-0.2em;}


I rewrite your code.

And I use "General sibling combinator".



By : GeckoTang

This video can help you solving your question :)
By: admin