I have this HTML / CSS snippet: .test123 { grid-template-columns: 255px 255px; transition: 200ms; display: grid; gap: 30px; .card { border-radius: 50px; border: 1px solid #BBD0FB; } .c1 { background-color: red; width: 100%; height: 100px; } .c2 { background-color: blue;…
Using HTML and JavaScript I am trying to create a list that transitions into view when a button is clicked, including a scrollable inner container, using a max-height transition on the parent DIV. However, while the parent div transitions smoothly,…
I'm developing a website that will have a "learn more" button that's split in two, one part says "learn more" and the other says "+". When the mouse hovers over it the "learn more" part disappears and the "+" grows…
I am unable to get the circle bar to animate, I attempted adding transition: all 600ms ease; but that didn't work. I am not if css animation support conic-gradient. jQuery(function ($) { $('.bar').addClass('animate'); }); .icon { width: 146px; height: 146px;…
body { padding: 300px; background-color: rgb(15, 19, 24); } .m { display: flex; justify-content: center; align-items: center; transition: all 0.8s ease-in-out; } .m * { transition: all 0.8s ease-in-out; } .m *:hover { animation: /*animation of all children*/ 0.4s ease…
I want to do some slow smooth transition when hover on .bg-gradient and same when i remove cursor from hover but its come quick gone quick on hover. .asc { height: 500px; background-position: 50%; background-size: cover; position: relative; } .bg-gradient:before…
HTML <div class="buttonFrame"><div class="btn"></div></div> CSS .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; z-index: 100px; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2,…
I am new to js and I been stuck on a problem on showing and hiding a div using js onscroll. I was able to figure that out fortunately but now my problem is when the div shows and hide…
I'm trying to apply a text-decoration-color transition effect to a child element of a link. Here's a sample of that markup: <div class="post"> <a href="/" class="post-link"> <div> <h1>Post name</h1> <div> Lorem ipsum... </div> </div> </a> </div> The entire post section…
I have the slides working properly, but they are transitioning too quickly. I would like to slow down the fade transition to two seconds or so. Here is the related code I'm currently using. I'm using swiper 11 bundle. <script…