将鼠标悬停在效果上将图像向下

Question

Here is an image of the media div with the on hover X I have:

Here is an image of when you click on the div and upload a photo. As you can see it fits nicely inside the box.

Finally here is a div when I hover over the image to see the X .

As you can see the image got pushed down. My end result is instead to have it hover over the image and not affect the images placement

Here's my CSS:

.x {
  color:red;
  #width:50px;
  #height:50px;
  display:none;
  #left:50px;
}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: absolute;
    width: 128px;
    height: 72px;
    background-color: #e0e0e0;
    cursor: default;
}

Here is my HTML:

<div class="MediaPreview" style="left: 10px; bottom: 10px;">
  <span>Image or video, required</span>
   <div class="x">x</div>
</div>

Answer 1

Try this?

.x {
  color:red;
  #width:50px;
  #height:50px;
  display:none;

  top: 10px;
  left: 10px;
  position: absolute;
  z-index: 1;

}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: absolute;
    width: 128px;
    height: 72px;
    background-color: #e0e0e0;
    cursor: default;
}

Answer 2

You need to apply position:absolute to .x , not .MediaPreview . Try this:

.x {
  color:red;
  display:none;
  position: absolute;
  top: 0;
  left: 0;
}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: relative;
    width: 128px;
    height: 72px;
    background-color: #e0e0e0;
    cursor: default;
}

Answer 3

This is how to get the job done. Using pure css

<div class="mediapreview">

<a href="#" class="upsize red">X</a>

<img src="http://hub.n2growth.com/wp-content/uploads/2012/04/About-People-2.jpg" alt="people" class="responsive">

</div>

DEMO

Answer 4

you can try this: https://jsfiddle.net/maky/gqn1nrxj/

.x {
  color:red;
  display:none;
  position: absolute;
  top: 0;
  left: 0;
}
.MediaPreview:hover > .x {
  display:block;
}
.MediaPreview {
    position: relative;
    padding:10px;
    width: 200px;
    height: 200px;
    background-color: #e0e0e0;
    cursor: default;
}