Categories
CSS Web development

How to place text over an image?

How to place text over an image?

To learn how to position text over an image with CSS follow the steps below:

Demo:

Step1.

Add HTML

Create the image container and add an image:

<div class="image-container">
  <img src="https://lenadesign.org/wp-content/uploads/2020/07/css-ice-cream.jpg" alt="ice-cream">
  <div class="left-b">Some Text...</div>
  <div class="left-t">Some Text...</div>
  <div class="right-t">Some Text...</div>
  <div class="right-b">Some Text...</div>
  <div class="center">Some Text...</div>
</div>

Step2.

Add CSS

Use CSS to position the text on an image (in the center, top right, top left, bottom right or bottom left):

.image-container {
  position: relative;
  text-align: center;
  color: #000;
  font-size:35px;
}

.left-b {
  position: absolute;
  bottom: 10px;
  left: 18px;
}

.left-t {
  position: absolute;
  top: 10px;
  left: 18px;
}

.right-t {
  position: absolute;
  top: 10px;
  right: 18px;
}

.right-b {
  position: absolute;
  bottom: 10px;
  right: 18px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Enjoy coding!

Categories
CSS Web development

CSS Image Zoom on Hover

CSS Image Zoom on Hover

To create the CSS Image Zoom on Hover effect follow the steps below:

Demo:

*to see the CSS Image Zoom on Hover effect on the website click here.

Step1.

Add HTML

<div class="seaside">
  <img src="https://lenadesign.org/wp-content/uploads/2021/07/brighton-1.jpg" alt="Brighton">
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

Style the image:

.seaside {
  position: relative;
  top:0;
  left:0;
  overflow: hidden;
  width: 450px;
  height: 350px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

.seaside img {
  width: 450px;
  height: 350px;
  position: relative;
  transition: .3s;
}

.seaside:before {
  position: absolute;
  content:"Sea Side";
  font-size: 60px;
  color: white;
  font-family: tahoma;
  background-color: rgba(69,123,157,0.4);
  text-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  z-index:1;
  width: 450px;
  height: 350px;
  align-items: center;
  justify-content: center;
  display: flex;
  opacity:0;
  transition: .2s;
}

Use the :hover selector:

.seaside:hover:before {
  opacity:1;
}

.seaside:hover img {
  transform: scale(1.5);
}

Enjoy coding!

Read also:

CSS Zoom on Hover

How to create Image Hover Overlay Effect (slide, fade)?

How to place text over an image?

Categories
CSS JavaScript Web development

CSS & JavaScript Image Magnifier Glass

Image Magnifier Glass

Demo:

*to see the Magnifier Glass effect on the website click here.

To create the CSS & JavaScript Image Magnifier Glass follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add JavaScript

Step1.

Add HTML

Create the image container and add the image that you want to Magnifique:

<div class="image-container">
  <img id="dinant" src="https://lenadesign.org/wp-content/uploads/2021/06/image-mg.jpg" width="600" height="440">
</div>

Step2.

Add CSS

Set the color and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.image-container {
  position:relative;
}

Style the image:

#dinant {
  border: 10px solid #333;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

And add magnifying glass:

.magnifier-glass {
  position: absolute;
  border: 5px solid #333;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
}

.magnifier-glass:before {
  content:"";
  position: absolute;
  width: 15px;
  height:70px;
  border-radius: 30px;
  background-color: #333;
  top:86px;
  left:90px;
  transform: rotate(-33deg);
}

Step3.

Add JavaScript

function Zoom(img, zoom) {
  var img, loupe, width, height, back;
  img = document.getElementById("dinant");

  loupe = document.createElement("div");
  loupe.setAttribute("class", "magnifier-glass");

  img.parentElement.insertBefore(loupe, img);
  loupe.style.backgroundImage = "url('" + img.src + "')";
  loupe.style.backgroundRepeat = "no-repeat";
  loupe.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  back = 2;
  width = loupe.offsetWidth / 2;
  height = loupe.offsetHeight / 2;

  loupe.addEventListener("mousemove", moveLoupe);
  img.addEventListener("mousemove", moveLoupe);
  loupe.addEventListener("touchmove", moveLoupe);
  img.addEventListener("touchmove", moveLoupe);
  
  function moveLoupe(e) {
    var pos, x, y;

    e.preventDefault();

    pos = position(e);
    x = pos.x;
    y = pos.y;

    if (x > img.width - (width / zoom)) {x = img.width - (width / zoom);}
    if (x < width / zoom) {x = width / zoom;}
    if (y > img.height - (height / zoom)) {y = img.height - (height / zoom);}
    if (y < height / zoom) {y = height / zoom;}

    loupe.style.left = (x - width) + "px";
    loupe.style.top = (y - height) + "px";
    loupe.style.backgroundPosition = "-" + ((x * zoom) - width + back) + "px -" + ((y * zoom) - height + back) + "px";
  }
  function position(e) {
    var a, x = 0, y = 0;
    e = e || window.event;

    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;

    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

Zoom("dinant", 2);

Enjoy coding!