Placer une image correctement formatée derrière un bouton Hover CSS Animation

Question

J'essaie actuellement de placer une image derrière une animation CSS Hover que je veux utiliser avec un bouton.

Le produit fini devrait ressembler à ceci: Mock Up of Finished Product

Toute aide en essayant d'insérer correctement et formater un fond comme celui-ci serait très apprécié, parce que je continue à courir dans des impasses en essayant d'insérer une image.

Jusqu'ici c'est ce que j'ai travaillé avec.

@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

Je pense que vous attendez comme indiqué ici. S'il te plaît vérifie le.

@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>