Question 43359 in Html Question posted in
Some basic documentation can be found here.

How do I get text centered over an image, make it a link and make it only appear when I haver over it? – Html

I have a lot of code done up so fare but I cant seem to get this last little bit done. I want a text link to show up dead center of my image on hover and cant seem to get the CSS to work. The current code has three images across the screen and when you hover over them they expand about 20% and show more of the image. I know I could take away the current hover effect place each image in its own container, center the text and apply hover but id like to keep the expanding image as well. This is for a photo blog and will be the main navigation of the web sight.

<div class="container">
    <div class="box">
      <img src="./adventure/DSC09797.JPG">
      <span>Adventure</span>
    </div>
    <div class="box">
      <img src="./nature/DSC09302.JPG">
      <span>Nature</span>
    </div>
    <div class="box">
      <img src="./adventure/DSC02296.JPG">
      <span>My People</span>
    </div>
    <div class="box">
      <img src="./spoke/DSC00079.JPG">
      <span>Spoke</span>
    </div>
  </div>

.container {
    display: flex;
    width: 100%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 100vh;

}

.box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    line-height: 0;
}

.box>img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: .5s;
}

.box>span {
    font-size: 3.8vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
}

.box:hover {
    flex: 1 1 10%;
}

.box:hover>img {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}
Tags:

2

Answers


  1. 0

    Try the following:

    .container {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 100vh;

}

.box {
  display: flex;
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
  line-height: 0;
  position: relative;
}

.box > img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover;
  transition: .5s;
}

.box > a {
  font-size: 3.8vh;
  display: block;
  position: absolute;
  height: 10vh;
  line-height: 2.6;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.4s ease all;
}

.box:hover {
  flex: 1 1 10%;
}

.box:hover > img {
  width: 100%;
  height: 100%;
}

.box:hover > a {
  opacity: 1;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}
    <div class="container">
  <div class="box">
    <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3">
    <a href="#">Adventure</a>
  </div>
  <div class="box">
    <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3">
    <a href="#">Nature</a>
  </div>
  <div class="box">
    <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3">
    <a href="#">My People</a>
  </div>
  <div class="box">
    <img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3">
    <a href="#">Spoke</a>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Remove img tag and use you image in div background-image and background properties and set width and height property of div.

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

Back To Top
Search