create a hover effect with css

Question

I am learning to create hover effect with images and text.

What I have is this:

<ul class="photo-grid">
    <li>
        <a href="">
            <figure>
                <img src="img/imageone" height="180" width="320" alt="Arc de Triomphe">
                <figcaption><p>Image One</p></figcaption>
            </figure>
        </a>
    </li>
    <li>
        <a href="">
            <figure>
                <img src="img/imagtwo" height="180" width="320" alt="Eiffel Tower">
                <figcaption><p>Image Two</p></figcaption>
            </figure>
        </a>
    </li>
    <li><a href="">
            <figure>
                <img src="img/imgthree" height="180" width="320" alt="Notre Dame">
                <figcaption><p>Image Three</p></figcaption>
            </figure>
        </a>
    </li>
</ul>

and css for this is

.photo-grid {
    margin: 1em auto;
    max-width: 1106px;
    text-align: center;
}

.photo-grid li {
    border: 5px solid white;
    display: inline-block;
    margin: 1em;
    width: 289px;
}

.photo-grid img {
    display: block;
    height: auto;
    max-width: 100%;
}

.photo-grid figure {
    height: 163px;
    overflow: hidden;
    position: relative;
    width: 289px;
}

.photo-grid figcaption {
    background: rgba(0,0,0,0.8);
    color: white;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

.photo-grid figcaption p {
    display: table-cell;
    font-size: 1.5em;
    position: relative;
    top: -40px;
    width: 289px;
    vertical-align: middle;
}

.photo-grid li:hover figcaption {
    opacity: 1;
}

.photo-grid img {
    display: block;
    height: auto;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    max-width: 100%;
}

.photo-grid li:hover img {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    transform: scale(1.4);
}

.photo-grid figcaption p {
    display: table-cell;
    font-size: 1.5em;
    position: relative;
    top: -40px;
    width: 289px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    vertical-align: middle;
}

.photo-grid li:hover figcaption p {
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.photo-grid figcaption {
    background: rgba(0,0,0,0.8);
    color: white;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    transition: all 300ms;
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms;
    z-index: 100;
}

It is working fine, I have the image in a square/rectangle shape and when I move the cursor over it the image fades and I get a text. But here I need few changes,

1) A text needs to be displayed along with the image (preferably over the image)
2) When the cursor is moved over the image another set of text should get displayed (which is also getting displayed with the current code) but the square image should get converted to a circle.

you need this.. css-tricks.com/examples/SlideinCaptions

Kheema Pandey
– Kheema Pandey

2015-05-07 09:01:58 +00:00
Commented May 7, 2015 at 9:01 — Kheema Pandey
– Kheema Pandey, Commented May 7, 2015 at 9:01

jbutler483 · Accepted Answer · 2015-05-07 10:19:41Z

Try this

in html part

.photo-grid {
  margin: 1em auto;
  max-width: 1106px;
  text-align: left;
  margin-left: 5%;
}
.photo-grid li {
  border: 5px solid white;
  display: inline-block;
  margin: 1em;
  width: 289px;
}
.photo-grid img {
  display: block;
  height: 300px;
  width: 300px;
  max-width: 100%;
  position: absolute;
}
.photo-grid figure {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 300px;
}
.photo-grid figcaption {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: table;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}
.photo-grid figcaption p {
  display: table-cell;
  font-size: 1.5em;
  position: relative;
  top: -40px;
  width: 289px;
  vertical-align: middle;
}
.photo-grid li:hover figcaption {
  opacity: 1;
}
.photo-grid:hover figure {
  border-radius: 50%
}
.photo-grid figcaption p {
  display: table-cell;
  font-size: 1.5em;
  position: relative;
  top: -40px;
  width: 289px;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  vertical-align: middle;
  height: 300px;
  width: 300px;
  text-align: center;
}
.photo-grid li:hover figcaption p {
  -moz-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
.photo-grid figcaption {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: table;
  height: 300px;
  width: 300px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  transition: all 300ms;
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  transition-delay: 100ms;
  z-index: 100;
}
#text {
  z-index: 100;
  position: absolute;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  left: 1px;
  top: 145px;
  text-align: center;
}
#text:hover {
  opacity: 0;
}

<ul class="photo-grid">
  <li>
    <a href="">
      <figure>
        <img src="img/imageone" height="180" width="320" alt="Arc de Triomphe">
        <figcaption>
          <p>Image One</p>
        </figcaption>
        <p id="text">Text One</p>
      </figure>
    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="img/imagtwo" height="180" width="320" alt="Eiffel Tower">
        <figcaption>
          <p>Image Two</p>
        </figcaption>
        <p id="text">Text Two</p>
      </figure>
    </a>
  </li>
  <li>
    <a href="">
      <figure>
        <img src="img/imgthree" height="180" width="320" alt="Notre Dame">
        <figcaption>
          <p>Image Three</p>
        </figcaption>
        <p id="text">Text Three</p>
      </figure>
    </a>
  </li>
</ul>

Collectives™ on Stack Overflow

create a hover effect with css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related