<div id="one">
  <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/093/cache/red-tulips_9381_990x742.jpg" alt="" />
</div>

<br />
<br />
<div id="two">
  <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/013/cache/butterflies-bluemorpho-wolinsky_1365_990x742.jpg" alt="" />
</div>


<br />
<br />

<div id="three">
  <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/754/cache/dos-palmas-cenote-mexico_75437_990x742.jpg" alt="" />
</div>

<br />
<br />

<div id="four">
  <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/093/cache/hibiscus-petals_9376_990x742.jpg" alt="" />
</div>


<br />
<br />

div {
  margin: 40px 20px;
  width: 432px;
  height: 289px;
  transition: all 1s;
}

img {
  width: 100%;
  height: 100%;
}

#one {
  outline: 24px dashed #C92620;
  box-shadow: 0 0 0 24px #7EB582;
}

#one:hover {
  outline-color: #7EB582;
  box-shadow: 0 0 0 24px #C92620;
}

#two {
  outline: 24px dashed #7598EC;
  box-shadow: 0 0 0 24px #443224;
}

#two:hover {
  outline: 2px dashed #443224;
  box-shadow: 0 0 0 24px #7598EC;
}

#three {
  outline: 24px dashed #024B7F;
  box-shadow: 0 0 0 24px #01FCCF;
}

#three:hover {
  outline: 2px dashed #01FCCF;
  box-shadow: 0 0 0 2px #024B7F;
}

#four {
  outline: 2px dashed #9C0E1E;
  box-shadow: 0 0 0 2px #E4E981;
  
}

#four:hover {
  outline: 24px dashed #E4E981;
  box-shadow: 0 0 0 24px #9C0E1E;
}