CODEWITHSUNDEEP
htmlcssbuttonhover
fuxes
fuxes

Reputation: 418

Button bar display text on hover

I was wondering if there's some way to produce the following only using CSS (No JS)

This is what I want to accomplish:

Initial status Just a div with 2 font awesome icons floating right

Mouse hover on Pen Mouse hover on pen icon

Mouse hover on X Mouse hover on X icon

I already tried to do this using a transformation and going from display: none to display: block but it seems that it's not possible to animate that CSS property. My current code look like this:

section.container {min-width: 500px; margin: 10% auto; text-align: center;}
.text-on-hover {cursor: pointer; font-size:20px;}

.text-on-hover:hover:before {opacity: 1;}
.text-on-hover:before {
  content: attr(data-hover);
  margin: 0 10px;
  opacity: 0; 
  transition: all .5s ease-in-out;
}
<section class="container">
  <i class="text-on-hover" data-hover="A long text">A</i>
  <i class="text-on-hover" data-hover="Another long text">B</i>
</section>

Theres some way to do that? If not, why?

Upvotes: 1

Views: 9017

Answers (3)

Weafs.py
Weafs.py

Reputation: 22992

EDIT: Check out the second snippet.

Here's how you could achieve it.

codepen

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
}
body {
  background-color: #e58139;
}
header {
  background-color: #333;
  width: 100%;
  height: 65px;
  overflow: hidden;
}
.menu-links {
  padding-right: 20px;
}
.toggle-menu {
  position: relative;
  float: right;
  right: -220px;
  transition: right 0.5s ease-in;
}
.content {
  line-height: 43px;
}
.toggle-menu li {
	display: inline-block;
	list-style-type: none;
}
.toggle {
  padding-top: 5px;
  cursor: pointer;
}
li.toggle:hover span.toggle-menu-bar {
  background-color: #ddd;
}
.toggle-menu-bar {
	display: block;
	width: 25px;
	height: 4px;
	background-color: #e58139;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 auto 3px;
  transition: background-color 0.2s;
}
a {
  font-size: 25px;
  text-decoration: none;
  color: #e58139;
  padding-right: 20px;
  transition: color 0.2s;
}
a:hover {
  color: #ddd;
}
.menu-links:hover > .toggle-menu {
  right: 0;
}
<header>
  <div class="menu-links">
    <ul class="toggle-menu">
      <li class="toggle">
        <span class="toggle-menu-bar"></span>
        <span class="toggle-menu-bar"></span>
        <span class="toggle-menu-bar"></span>
      </li>
      <li class="content">
        <ul>
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</header>

EDIT: Replicating the following:

enter image description here

codepen

body {
  background: #222222;
}
div.edit,
div.delete {
  position: absolute;
  font-size: 22px;
  color: #989898;
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
  right: 5px;
}
div.edit {
  transform: rotate(90deg);
  right: 30px;
}
.btn-container {
  margin: 2px 0 0 155px;
}
.box {
  position: relative;
  background-color: #F5F5F5;
  width: 200px;
  height: 30px;
  border: 10px solid #DDDDDD;
}
div.edit:hover,
div.delete:hover {
  color: #272727;
}
div.edit:hover:before {
  content: 'Edit';
  position: absolute;
  color: #989898;
  font-size: 12px;
  right: 0px;
  top: 30px;
  transform: rotate(-90deg);
}
div.delete:hover:before {
  content: 'Close';
  position: absolute;
  color: #989898;
  font-size: 12px;
  right: 22px;
  top: 5px;
}
.delete:hover + .edit {
  right: 60px;
}
<div class="container">
  <div class="box">
    <div class="btn-container">
      <div class="delete">&#10006;</div>
      <div class="edit">&#9998;</div>
    </div>
  </div>
</div>

Upvotes: 3

lee_gladding
lee_gladding

Reputation: 1100

You can't transition the display attribute of CSS.

But for this specific example, as you are floating right you could transition the menu's right property, like so:

.toggle-menu {
    right: -220px;
    position: relative;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.toggle-menu:hover {
    right: 0;
}

Here is the example: http://jsfiddle.net/v8t2td3b/1/

(note: I also removed the style="display: none;" from the .content li)

Upvotes: 2

Phil Tune
Phil Tune

Reputation: 3305

HTML

<div class="menu">
    <div class="hamburger"></div>
    <div class="menu-items">
        <a href="">...</a>
        <a href="">...</a>
    </div>
</div>

CSS

.menu-items {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.menu:hover > .menu-items {
    opacity: 1;
    width: 200px; /*or whatever width*/
}

is one way of doing it sans JavaScript.

Upvotes: 0

Related Questions