Tag: Image

Web development

How to place text over an image?

Post author By Lena Stanley
Post date July 21, 2021

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!

CSS Image Zoom on Hover

Post author By Lena Stanley
Post date July 20, 2021

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!

CSS & JavaScript Image Magnifier Glass

Post author By Lena Stanley
Post date June 30, 2021

Demo:

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

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

Add HTML
Add CSS
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 colour 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!