Question

我正在尝试使用CSS创建翻转效果图像。图像以覆盖的标题开始，然后在文本覆盖图上方悬停时出现。我很满意它到目前为止的情况，除了文本区域顶部文本向右移动。你也可以向上和向下滚动，但我假设这是同样的问题？

HTML

.service-box .overtext {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
}

.service-box .title {
    text-align: center;
    opacity: 0;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
}

.service-box:hover .title,
.service-box:focus .title {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.service-box .tagline {
    text-align: center;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
}

.service-box:hover .tagline,
.service-box:focus .tagline {
    opacity: 1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
}

.service-overbox {
    background-color: #000000;
    position: relative;
    color: #fff;
    z-index: 2;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
}

.service-box:hover .service-overbox { opacity: 0.7; }
.service-box:hover .box-title { opacity: 0; }

.service-box {
    cursor: pointer;
    position: relative;
    overflow: auto;
    height: 380px;
    width: 100%;
    max-width: 580px!important;
    background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}


.box-title {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 38px;
    line-height: 38px;
    font-family: 'Anton', sans-serif;
    color: #00AAC4;
}
.tagline {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    line-height: 28px;
}

.title {
    font-size: 40px!important;
    font-family: 'Anton', sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
}

CSS

import numpy as np
import pandas as pd

mydata = pd.DataFrame({'timestamp': ['2015-06-22 16:48:00']*3 +
                                    ['2015-06-23 16:48:00']*2 +
                                    ['2015-06-24 16:48:00'] +
                                    ['2015-06-25 16:48:00']*4 +
                                    ['2015-07-13 16:48:00',
                                     '2015-08-13 16:48:00'],
                       'BPM': [65]*8 + [70]*4})
mydata['timestamp'] = pd.to_datetime(mydata['timestamp'])
print(mydata)

#     BPM           timestamp
# 0    65 2015-06-22 16:48:00
# 1    65 2015-06-22 16:48:00
# 2    65 2015-06-22 16:48:00
# 3    65 2015-06-23 16:48:00
# 4    65 2015-06-23 16:48:00
# 5    65 2015-06-24 16:48:00
# 6    65 2015-06-25 16:48:00
# 7    65 2015-06-25 16:48:00
# 8    70 2015-06-25 16:48:00
# 9    70 2015-06-25 16:48:00
# 10   70 2015-07-13 16:48:00
# 11   70 2015-08-13 16:48:00

yourdata = pd.Series(['2015-06-22', '2015-06-23', '2015-06-24',
                      '2015-06-25', '2015-07-13'], name='timestamp')
yourdata = pd.to_datetime(yourdata).to_frame()
print(yourdata)

# 0   2015-06-22
# 1   2015-06-23
# 2   2015-06-24
# 3   2015-06-25
# 4   2015-07-13

result = (mydata.set_index('timestamp').resample('D')
                .size().loc[yourdata['timestamp']]
                .reset_index())
result.columns = ['timestamp', 'result']
print(result)

#    timestamp  result
# 0 2015-06-22       3
# 1 2015-06-23       2
# 2 2015-06-24       1
# 3 2015-06-25       4
# 4 2015-07-13       1

感谢任何可能有助于解决的评论。

由于

Answer 1

如果您不支持IE7及更低版本，请尝试在box-sizing: border-box;规则中添加.service-overbox媒体资源。它似乎是传统的盒子模型对padding的处理绊倒了你。

＆＃13;

.service-box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}
.service-box .title {
  text-align: center;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}
.service-box:hover .title,
.service-box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.service-box .tagline {
  text-align: center;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}
.service-box:hover .tagline,
.service-box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}
.service-overbox {
  background-color: #000000;
  position: relative;
  color: #fff;
  z-index: 2;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.service-box:hover .service-overbox {
  opacity: 0.7;
}
.service-box:hover .box-title {
  opacity: 0;
}
.service-box {
  cursor: pointer;
  position: relative;
  overflow: auto;
  height: 380px;
  width: 100%;
  max-width: 580px!important;
  background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.box-title {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 38px;
  line-height: 38px;
  font-family: 'Anton', sans-serif;
  color: blue;
}
.tagline {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  line-height: 28px;
}
.title {
  font-size: 40px!important;
  font-family: 'Anton', sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
}

＆＃13;

<div class="service-box">

  <p class="box-title">Social Media</p>

  <div class="service-overbox">

    <h2 class="title">Social Media</h2>

    <p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus
      elit. Nam in justo sapien.</p>

  </div>

</div>

＆＃13;

图像顶部的文本向左和向右滚动

1 个答案: