How to Display Image Over Image on Hover with CSS

Image to Appear Over Image on Hover With CSS

I would do it like this using a pseudo element to apply an overlay. Simplifies things quite a bit.

.imageContainer a {

  width: 100%;

  display: inline-block;

  position: relative;

}

.imageContainer a:after {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: rgba(139,69,19,0.5);

  content: 'Buy';

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  font: 5em cursive;

  opacity: 0;

  transition: opacity .5s;

}

.imageContainer a:hover:after {

  opacity: 1;

}

.imageContainer img {

  max-width: 100%;

  vertical-align: top;

}

/*

.image a:hover {

  display: block;

  background-image: url("http://i.imgur.com/ARiA0ua.jpg");

  margin-right: 28px;

  margin-bottom: 28px;

  transition: all 0.2s ease-in-out;

  position: absolute;

  z-index: 1;

  width: 100px;

  height: 120px;

}

*/

<div class="imageContainer">

  <a href="#">

    <img class="image" src="http://i.imgur.com/F2PaGob.jpg">

  </a>

</div>

Display an image on top of another CSS using hover

i cannot think of another way without position: absolute
but i have created you an example where the the image is positioned automatically on the center using flex box https://jsfiddle.net/r5Lfcbh8/2/

Edit i use position relative on the parent div as relative make the children absolute top left 0 same as relative.

<div class="overlayPar">
    <img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
    <div class="imgOverlay">
        <span class="eye"></span>
    </div>
</div>

.overlayPar {
  position: relative;
}

.imgOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 255, 247, .4);
  display: none;
}

.imgOverlay .eye {
  background: white;
  width: 25px;
  height: 25px;
  display: block;
  margin: auto;
}

.overlayPar:hover .imgOverlay  {
  display: flex;
}

.equilibrium {
  display: block;
}

hover image over another image

A few things to keep attention here :

Don't put your styles inside the <body> tag
Try to style the layer you want to see over the image whitout the use of the :hover state so it must be .container .hover-second-image-over-first-image
Use the :hover action on all the .container element

.container {

  height: 300px;

  width: 500px;

  position: relative;

  background-color: red;

}

img {

  position: relative;

  height: 100%;

  width: 100%;

}

.container .hover-second-image-over-first-image {

  width: 100%;

  height: 100%;

  background:blue;

  opacity:0;

  position: absolute;

  top:0;

  left:0;

  z-index:10;

  -webkit-transition: all 0.4s ease;

  -moz-transition: all 0.4s ease;

  -o-transition: all 0.4s ease;

  transition: all 0.4s ease;

}

.container:hover .hover-second-image-over-first-image {

  opacity:.7;

}

<div class="container">

  <div class="hover-second-image-over-first-image"></div>

  <img src="http://placehold.it/200" />

</div>

How to display a div when hovering over an image using CSS/HTML + Transitions?

The hover effect is not mobile-friendly (though there are more and more 'hover-sensitive' devices).
To accomodate most devices I often use both :hover and :focus to 'dropdown' things. However, this
requires 'focusable' elements, for which I usually use the <a>nchor tag.

But first: The point in your code is consistency as you are mix-matching lowercase and uppercase in #content and id="Content". That is why it does not work anyway.

Answering your questions:

1) make upper/lowercase consistent!

2) To create a hover with persistency, trigger the display of 'content' with a focusable 'trigger' element

On hover/click the outer <a> stays focused and therefore its sibling #content visible.
On hover .shorttext its sibling .longtext will show.

On click .shorttext (actually anywhere in #content) the content box will close again as the outer <a> loses focus again.

FYI-1, attribute display is not animatable, so you will need an alternative when you need a transition on some element. In this case opacity going from 0 to 1 is used (optionally combined with width and height, from 0 to 300px).

FYI-2, using href="javascript:void(0)" instead of href="#" will prevent browers from adding an entry in their history log each click.

FYI-3 final, use CSS classes by default, these are generic making it a lot easier to copy the same behaviour in your HTML, without repeating CSS each time. IDs are specific and require you to copy equal CSS over and over.

a {

  color: currentColor;

  text-decoration: none

}

.picture {

  position: fixed;

  left: 0px;

  right: 0px;

  top: 0px;

  bottom: 0px;

  margin: auto;

  width: 375px;

  height: 375px;

}

.content {

  /*  display: none;  remove */

  opacity: 0; /* add */

  transition: all 150ms ease-in-out; /* add */

  position: fixed;

  left: -800px;

  right: 0px;

  top: 0px;

  bottom: 0px;

  margin: auto;

  width: 0; /* [OPTIONAL] modify from 300px */

  height: 0; /* ditto */

  background-color: #7377a8;

}

.trigger:hover+.content,

.trigger:focus+.content {

  /* add, for persistent display of content. click elsewhere to close again */

  /*  display: block; remove */

  opacity: 1; /* add */

  width: 300px; /* [OPTIONAL] add, see above */

  height: 300px;

}

.shorttext { /* eye-candy only */

  width: 100%;

  text-align: center

}

.longtext {

  display: none

}

.shorttext:hover+.longtext {

  display: block;

}

/* little debug helper */

[outlines="1"] * {

  outline: 1px dashed purple

}

<body outlines="0">

<a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a>

<div class="content">

    <h3 class="shorttext">short intro text, hover me</h3>

    <p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et

        deleniti copiosae.</p>

</div>

</body>

Display image over text on hover

You can give the image the following:

position: absolute;
z-index: 100; 
.. and set margin based on what you want

Just make sure you apply these seetings only to the sidebar images.

Overlay image on hover using only css

Did not have the original image so used an image of my own. See if this helps.

You can also refer to this link: https://jsfiddle.net/askptx0y/

.image:hover {

  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');

  background-repeat: no-repeat;

  opacity: 1;

}

img:hover {

  opacity: 0.5;

}

<div class="image">

  <a href="http://www.example.com">

    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter">

  </a>

</div>

HTML - Display image on hover

With document.getElementById("hover_img") you don't show the image, but the container around it (hover_img). But you have hidden the image (.hover_img img) in your CSS.

Use document.querySelectorAll("#hover_img>img") for selecting your image. querySelectorAll will return a NodeList, so you have to use x[0] for selecting the first element in list.

function hoverImage(event) {
  var x = document.querySelectorAll("#hover_img>img");
  var sDisplay = (event.type === "mouseout") ? "none" : "block";
  x[0].style.display = sDisplay;
}

.hover_img {
    position:relative;
    height: 100%;
    width:100%;
    z-index: 99;
}

.hover_img img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}

<div id="object1">
    <div class="title" onmouseover="hoverImage(event)" onmouseout="hoverImage(event)">SPT 3</div>
</div>

<div class="hover_img" id="hover_img">
    <img src="https://picsum.photos/200/300">
</div>