Tengo un card-body Bootstrap 5 con un card-title card-text con textos dentro de la clase card-body . ¿Cómo puedo diseñar mi CSS para que el card-title se desplace horizontalmente automáticamente al pasar el mouse sobre el card-title ?
Ejemplo:
<div className="card-body "> <h5 style={{ textAlign: "center" }} className="card-title"> <Link to={`/show/${userShow.show.id}`} className="stretched-link" id="links"> <span style={{ fontWeight: "bold", color: "white" }}> {userShow.show.name} </span> </Link> </h5> <span className="card-text"> <h6 style={{ textAlign: "center", fontSize: "14px", fontWeight: 400, color: "white", }}> {" "} {userShow.show.publisher} </h6> </span> </div>¡Gracias por adelantado!
Aquí un gran artículo que explica cómo hacer esto.
.content { padding: 17px 0 17px 17px; width: 300px; height: 200px; overflow-y: scroll; mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 17px, black 17px); mask-size: 100% 20000px; mask-position: left bottom; -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 17px, black 17px); -webkit-mask-size: 100% 20000px; -webkit-mask-position: left bottom; transition: mask-position 0.3s, -webkit-mask-position 0.3s; } .content:hover { -webkit-mask-position: left top; } @keyframes background { from { background: pink; } to { background: #c0d6ff; } } .wrapper { float: left; animation: background 5s infinite alternate; } <div class="wrapper"> <div class="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div>Supongo que te refieres a un efecto de marquesina .
El siguiente código puede crear una marquesina que se desplaza solo cuando pasa el mouseover sobre ella, sin embargo, no he podido hacer que se detenga de forma predeterminada, las propiedades onshow y onload no parecen funcionar.
<marquee onmouseover="this.start()" onshow="this.stop()" onload="this.stop()" onmouseout="this.stop()" > Card heading </marquee>agregar css como este:
.card-body:hover .card-title{ position: relative; animation: scroll 2s infinite; } @keyframes scroll { 0%, 100% { margin-left: 0; } 50% { margin-left: 200px; } }