-1

Gallery

I have one requirement in my application where I am showing images when the user click on folder icon but I don't want to use plain folder icon instead of it I want to show it as windows operating system pictures folder(where images will be displayed along with folder).

<div class="gallery-view">
    <img src="folderimage.png" onclick="getImages()"/>
</div>
<div class="show-images">
    <img src="image1"/><br/>
    <img src="image2"/>
</div>
DotNetLover
  • 229
  • 1
  • 4
  • 11
  • You can use icons from `Shell32.dll` http://stackoverflow.com/questions/6872957/how-can-i-use-the-images-within-shell32-dll-in-my-c-sharp-project – G J Jun 30 '16 at 07:42

1 Answers1

0

You can create the folder shape using CSS and then set the background-image property to the first image in the collection.

CSS:

.folder {
    width: 150px;
    height: 105px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    background-size: 100%; 
    background-image : url("http://weknowyourdreams.com/images/space/space-04.jpg");
    border-radius: 0 6px 6px 6px;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}

.folder:before {
    content: '';
    width: 50%;
    height: 12px;
    border-radius: 0 20px 0 0;
    background-color: #708090;
    position: absolute;
    top: -12px;
    left: 0px;
}

fiddle

uk2k05
  • 368
  • 2
  • 9