CODEWITHSUNDEEP
htmlcssmobileresponsive-designresponsive
Moods762
Moods762

Reputation: 39

Creating Responsive Hover CSS Logo

I am having an issue displaying these hover logo's properly when opened up on mobile. Not sure how to make these properly responsive. I thought setting the logo's margin: 0 auto; would do the trick, but I guess not.

Any help would be much appreciated!!

(btw I have changed the image to burger king for this example) 

.logo {
  width: 180px;
  padding: 20px;
  margin: 0 auto;
  position: relative;
  display: block;
}

.logo__image {
  width: 100%;
  transition: transform .5s;
  height: auto;
}

.logo__text {
  color: #627562;
  font-size: .9em;
  font-weight: bold;
  font-family: Arial;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.logo .img-responsive {
    margin: 0 auto;
}

.logo:hover .logo__image {
  transform: translateY(-20px);
}

.logo:hover .logo__text {
  opacity: 1;
}

.test_p__text {
  color: #636059;
  font-size: 32px;
  font-weight: normal;
  font-family: Arial;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .5s;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.test_p:hover .test_p__image {
  transform: translateY(-50px);
}

.test_p:hover .test_p__text {
  opacity: 1;
}
<div class="logo">
  <img class="logo__image" src="https://i.imgur.com/l2DkgFN.png" />
  <span class="logo__text">Providing Industry Wide Solutions</span>
</div>

Upvotes: 0

Views: 191

Answers (1)

Ahs N
Ahs N

Reputation: 8366

You forgot the meta tag. Add this to your <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is how it looks without the meta tag.

And this is how it looks with the meta tag.

Upvotes: 1

Related Questions