Jan Jan - 4 months ago 8
CSS Question

Apply CSS style by clicking on image

I'm currently working on a little photo album. My plan is if I click the little thumbnail image a border should appear and stay until I click another image. In other words: The hover should stay active when I clicked it.
Here is my Code:



.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover,
.images:target {
border: 4px solid #009EE0;
}
.table {
width: 40%;
height: 100%;
border-right: 1px solid silver;
float: left;
}

<div class="table">
<div class="images" id="image_first">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
<div class="images">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
</div>
</div>





Hope you can help me!
Thanks in advance, jan

Answer

Use :focus and give tabindex="1" attribute.

.images {
  float: left;
  margin-right: 10px;
  border: 1px solid silver;
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-bottom: 50px;
  border: 4px solid transparent;
}
.images img {
  height: 100px;
  width: auto;
}
.images:hover,
.images:active,
.images:focus,
.images:target {
  border: 4px solid #009EE0;
}
.table {
  width: 40%;
  height: 100%;
  border-right: 1px solid silver;
  float: left;
}
<div class="table">
  <div class="images" id="image_first" tabindex="1">
    <img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
  <div class="images" tabindex="1">
    <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
  </div>
</div>

Comments