Bethfiander Bethfiander - 1 month ago 10
CSS Question

Load Image Source from Html instead of Css

I have been using some code for a thumbnail carousel using Focus, I am just wondering if it is possible to mimic the functionality of the carousel but change that the image is loaded within the html instead of having to have the images url in the css. Is it possible to do when using focus?

Html:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>


Css:

.mdT {
width:96px;
height:96px;
border:0px;
outline:0;
vertical-align:middle;
background-color:#AAAAAA;
}
.mdT:focus {
width:256px;
height:256px;
}

/* Change Images Depending On Focus */
.mdI1 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+4'); }


http://jsfiddle.net/1h68hs7n/

Answer

Yes, like this <div style="background-image: url(...)"></div>

When it comes to :focus, no, but using mouseover could be an option.


Update

If it is possible to add an inner element, you could do like this

.mdT {
  position: relative;
  width:96px;
  height:96px;
  border:0px;
  outline:0;
  vertical-align:middle;
  background-color:#AAAAAA;
}
.mdT:focus {
  width:256px;
  height:256px;
}
.mdT span  {
  display: none;
}
.mdT:focus span  {
  display: inline-block;
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
}
<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img1">
  <span style="background-image:url(http://placehold.it/256x256/555555&text=Image+1"></span>
</button>

<button class="mdT" style="background-image:url(http://placehold.it/96x96/AAAAAA&text=img2">
  <span style="background-image:url(http://placehold.it/256x256/555555&text=Image+2"></span>
</button>