將正確格式的圖像放置在懸停按鈕後面CSS動畫

Question

我目前正試圖將圖像置於CSS懸停動畫之後，並希望與按鈕一起使用。

成品應該是這個樣子： Mock Up of Finished Product

任何試圖正確地插入和格式化的背景幫助像這樣將不勝感激，因爲我一直運行到死角試圖插入的圖像。

到目前爲止，這是我一直在努力。

@import "bourbon"; 
 

 
* { 
 
\t -webkit-transition-property: all; 
 
\t -webkit-transition-duration: .2s; 
 
    -moz-transition-timing-function: cubic-bezier(100,50,21,6); 
 
\t -moz-transition-property: all; 
 
\t -moz-transition-duration: .2s; 
 
    -moz-transition-timing-function: cubic-bezier(100,50,21,6); 
 
} 
 
h1{ font-family: calibri; 
 
    color:#FFFFFF; 
 
    font-size: 20px; 
 
    text-align: center; 
 
} 
 
body { 
 
    background-color: #613f4d; 
 
    padding-top: 70px; 
 
    font-family: 'Open Sans', calibri; 
 
    text-align: center; 
 
    font-weight: 100; 
 
} 
 

 

 
.btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 166px; 
 
    height: 45px; 
 
    font-size: 17px; 
 
    line-height: 45px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
} 
 
.btn svg { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
} 
 
.btn svg rect { 
 
    fill: none; 
 
    stroke: #fff; 
 
    stroke-width: 1; 
 
    stroke-dasharray: 422, 0; 
 
    
 
    @include transition(all 1300ms $ease-out-expo); 
 
} 
 
.btn:hover svg rect { 
 
    stroke-width: 5; 
 
    stroke-dasharray: 10, 310; 
 
    stroke-dashoffset: 33; 
 
} 
 

 
.btn:hover { 
 
    color:#fff; 
 
    font-size:18px; 
 
    letter-spacing:1px; 
 
    font-weight:bold; 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'> 
 

 
<h1>Find out more about our</h1> 
 
<div class="btn"> 
 
    <svg> 
 
    <rect x="0" y="0" fill="none" width="166" height="45"/> 
 
    </svg> 
 
Company 
 
</div>

Answer 1

我想你期待如下所示。請檢查一下。

@import "bourbon"; 
 

 
* { 
 
\t -webkit-transition-property: all; 
 
\t -webkit-transition-duration: .2s; 
 
    -moz-transition-timing-function: cubic-bezier(100,50,21,6); 
 
\t -moz-transition-property: all; 
 
\t -moz-transition-duration: .2s; 
 
    -moz-transition-timing-function: cubic-bezier(100,50,21,6); 
 
} 
 
h1{ font-family: calibri; 
 
    color:#FFFFFF; 
 
    font-size: 20px; 
 
    text-align: center; 
 
} 
 
body { 
 
    background-color: #613f4d; 
 
    padding-top: 70px; 
 
    font-family: 'Open Sans', calibri; 
 
    text-align: center; 
 
    font-weight: 100; 
 
} 
 

 

 
.btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 166px; 
 
    height: 45px; 
 
    font-size: 17px; 
 
    line-height: 45px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
} 
 
.btn svg { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
} 
 
.btn svg rect { 
 
    fill: none; 
 
    stroke: #fff; 
 
    stroke-width: 1; 
 
    stroke-dasharray: 422, 0; 
 
    
 
    @include transition(all 1300ms $ease-out-expo); 
 
} 
 
.btn:hover svg rect { 
 
    stroke-width: 0; 
 
} 
 

 
.btn:hover .heading { 
 
display:none; 
 
} 
 

 
    
 
    .bg { 
 
    position: fixed; 
 
    z-index: -1; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transition: .25s; 
 
    pointer-events: none; 
 
} 
 

 
.btn :hover ~ .bg { 
 
    //background: #ff6d6d; 
 
    background-image: url("https://i.stack.imgur.com/WpFwN.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'> 
 

 
<h1 class="heading">Find out more about our</h1> 
 
<div class="btn"> 
 
    <svg> 
 
    <rect x="0" y="0" fill="none" width="166" height="45"/> 
 
    </svg> 
 
<div class="heading"> Company</div> 
 
<div class="bg"> 
 
</div> 
 
</div>