/** * * Plugin Styles */ h3.choose-demo-title { background: #fff; padding: 16px; border-left: 4px solid #00b9eb; margin: 0 0 40px; } .all-demo-wrapper{ margin-top: 40px; margin-left: -3%; } .all-demo-wrapper .demo{ background: #FFF; color: #fff; border: 1px solid #ddd; width: 30.33%; float: left; margin-left: 3%; margin-bottom: 40px; } .demoinstall-title-btn-wrap { position: relative; font-size: 14px; font-weight: 600; margin: 0; line-height: 26px; padding: 10px 15px; -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.1); box-shadow: inset 0 1px 0 rgba(0,0,0,.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #fff; background: rgba(255,255,255,.65); } .demo-install-button{ -webkit-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; position: absolute; top: 0; bottom: 0; right: 0; height: 46px; padding: 10px 20px; background: rgba(244,244,244,.7); border-left: 1px solid rgba(0,0,0,.05); } .demoinstall-title-btn-wrap h4{ margin: 0; } .all-demo-wrapper .demo{ position: relative; } .demo-img-wrap{ position: relative } a.preview-link{ display: none; text-decoration: none; background: rgba(210, 109, 79, 0.8); padding: 5px 20px; color: #fff; border-radius: 5px; position: absolute; top: 50%; left: 34%; transform: translateY(-50%); transition: all 0.5s ease; } .demo-img-wrap:hover a.preview-link { display: block; } .demo-img-wrap:hover a.preview-link:hover{ background: rgba(210, 109, 79, 1); }