Photoshop Question posted in
The official user guide can be found here.

Add icons on images (for remove and edit image info) – Photoshop

I have an issue about define the positions of icons on pictures.
My current visual:

enter image description here

and I would like to have something like this:

enter image description here

and on hover I would like to have an edit icon, like this:

enter image description here

my current html:

<div class="artist-collection-photo">
                <button class="close" type="button">×</button>
                <a data-target="#photo-fields-5-0" data-toggle="modal">
                  <img width="120" height="120" alt="image.jpg" class="img-thumbnail">
                  </a>
                </div>

and css:

.artist-collection-photo {
  float: left;
  margin: 10px;
  cursor: pointer;
  width: 120px;
  height: 120px;
}

I would appreciate your help, I’m horrible with visual parts 🙁

PS: The edited the example images in photoshop

Thanks!

Tags:

2

Answers


  1. 0

    I think this is what you want: https://jsfiddle.net/c259LrpL/30/

    set .artist-collection-photo {position: relative;}

    then set .close{position: absolute;}

    this will position the button inside the image, then position it using top: 0; and right: 0;

    .artist-collection-photo {
  float: left;
  margin: 10px;
  cursor: pointer;
  width: 120px;
  height: 120px;
  position: relative;
}
.close{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}

    For the fade portion you see here: https://jsfiddle.net/c259LrpL/31/

    .img-thumbnail {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.img-thumbnail:hover {
  opacity: 0.5;
}
    Login or Signup to reply.
  2. 0

    http://www.bootply.com/IRZvpTK41g

    Your containing div (the photo) needs to be set to position relative and the button X needs to be set to position:absolute. Tweak with the measurements. To get the button to change color on hover, just add the button:hover pseudoclass and change the color there.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search