Journal CSS: Image list - updt!

9 min read

Deviation Actions

fkinghost's avatar
By
fkinghost
Published:
2.5K Views
update update: note that this wont work in IE - so if you can be bothered you should also link to the deviation (ie using the deviation title) so iediots can still visit the deviations :thumbsup:

update: added ability to nest lists, see example below. Looks a bit ugly, but it's up to you to style it to your taste :)


Hey guys, here's another Journal CSS trick I promised I'd share, a thumb/image list - again, full explanation to come when I finish my Creative Journal CSS tutorial.

The stuff going on in the CSS is a little complicated, but once you customise the colours and sizes you can forget about it. The HTML, as you'll see is nice and simple, so it's not going to be a hassle to use this regularly - it's not much different to what you use daily already.

It's also pretty flexible - any image you place inside a list will get the treatment. You can use thumb code, or image tags. If you use image tags there will be extra work, but it also means the :hover size will be larger - so it's a trade-off you'll have to decide upon.

Because emotes are images too, they'll get the treatment too, not a problem if you don't use emotes, but if you'd like to use emotes you'll need to change the code. Wrapping your images in bold tags, and then changing the selector to imglist b img{...} will do. If you don't know what I'm talking about... eh. Send me a note or wait until I'm done with the tutorial.

I've also added a line of CSS so that if you wrap the image in italic tags the border will be hidden. If you want the border hidden on all images, do this in the CSS properly. I've added the italic trick incase you want to hide the border on things like emotes.

Das fancypants list



  • 5875 by The-Definition 5875 by The-Definition
  • RITE_SAMPLE_PAGE_2--02 by andrescampos RITE_SAMPLE_PAGE_2--02 by andrescampos
  • winter and construction by mutsy winter and construction by mutsy
  • sea turtle by macen sea turtle by macen
  • Big Knobs by bypass2020 :thumb60285660:
  • Mother by bypass2020 :thumb60030623:
  • pacman by Bad-Blood (wrapped in italic tags to remove border) pacman by Bad-Blood
  • l u s h 9 9 . 5 by taow :thumb45886539:
  • example of img tag by foundsoundfunny
  • example of avatar code, kinda pointless, but just 'cause :iconpachunka:
  • It's also possible to nest lists - Just place a list inside a list item! Extra CSS will be needed though, check the box below.
    • 5875 by The-Definition 5875 by The-Definition
    • RITE_SAMPLE_PAGE_2--02 by andrescampos RITE_SAMPLE_PAGE_2--02 by andrescampos
    • winter and construction by mutsy winter and construction by mutsy
    • sea turtle by macen sea turtle by macen
    • Big Knobs by bypass2020 :thumb60285660:
    • Mother by bypass2020 :thumb60030623:
    • pacman by Bad-Blood (wrapped in italic tags to remove border) pacman by Bad-Blood
    • l u s h 9 9 . 5 by taow :thumb45886539:
    • example of img tag by foundsoundfunny
    • example of avatar code, kinda pointless, but just 'cause :iconpachunka:



Das HTML


<div class="imglist">
<ul>
  <li>5875 by :devThe-Definition: :thumb40169790:</li>
  <li> pacman by :devbad-blood: <i>:thumb52735432:</i></li>
  <li><i>example of img tag by :devthespook:</i> <img src="http://tn3-1.deviantart.com/fs17/300W/f/2007/170/3/e/tv_on_grass__by_thespook.jpg" alt="" /></li>
  <li><i>example of avatar code, kinda pointless, but just 'cause</i> :iconpachunka:</li>
</ul>
</div>


Das CSS


Bold red text is bits you can change to customise the look/feel of the list to suit your journal.

If you want to change the default max-width of .imglist img{...}, you'll also have to change the padding of .imglist li{...} to adjust for this.

The position of .imglist img{...} is set to bottom: -10px so that as people move the mouse downwards the next image in the list will pop up unobstructed. You could change it to top: -10px if you so wish, but (to me anyhow) it's kinda annoying to use this way.

The final block of CSS is newly added for the nested lists :thumbsup:

.imglist img{
  display: none;
  position: absolute!important;
  left: 5px;
  bottom: -10px;
  border: 3px solid #ddd;
  max-width: 70px;
  height: auto!important;
  background: #eee
}

.imglist  ul{
  margin: 0;
  padding: 0;
  cursor: default;
  font-size: 11px;
  border: solid #ddd;
  border-width: 2px 0
}

.imglist  li{
  list-style: none;
  margin: 2px;
  padding: 4px 4px 4px 90px;
  position: relative
}

.imglist br{display: none}
.imglist i img{border: 0!important}
.imglist  li:hover{background-color: #eee}
.imglist  li:hover img{display: block; z-index: 999}
.imglist  li img:hover{max-width: 100%!important}
.imglist  li .shadow{background-image: none!important}

.imglist li ul{border: 0; position:absolute; right: -999em; background: #eee}
.imglist li:hover ul{right: 0}
.imglist li:hover li img{display: none}
.imglist li li:hover img{display: block; border-color: #fff}
.imglist li li:hover{background: #fff}


Enjoy.

Any questions - shoot. More to come - might keep it up at one Journal CSS technique per day until the tutorial is finished. :thumbsup:

© 2007 - 2026 fkinghost