<div id="fix01" class="fix_bn-R"><a href="http://nuconeco.net/"></a></div>
.fix_bn-R {
  width: 80px; /* バナーの横幅 */
  height: 120px; /* バナーの縦幅 */
  position: fixed ;
  right: 0;
  bottom: 0;
  z-index: 999;
  -webkit-transition: width ease-in-out 0.5s;
  -moz-transition: width ease-in-out 0.5s;
  -ms-transition: width ease-in-out 0.5s;
  -o-transition: width ease-in-out 0.5s;
  transition: width ease-in-out 0.5s;
}

.fix_bn-R a {
  display: block;
  width: 100%;
  height: 100%;
}

.fix_bn-R:hover {
  width: 600px; /* マウスオーバー後のバナーの横幅 */
}

#fix01 {
  background: url("http://nuconeco.net/wp-content/uploads/2017/12/float_nuco.jpg") 0 0 no-repeat; /* バナーのURL */
  top: 30px; /* バナーの位置 */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.