Блог

Главная - Вопросы по программированию - Конфликт масштаба CSS с дополнениями

Конфликт масштаба CSS с дополнениями

#html #css

#HTML #css

Вопрос:

У меня есть div обертывание большого пальца img . Я применил эффект для масштабирования и поворота img при наведении курсора на div . Проблема в том, что div имеет класс bootstrap с отступами слева, отступами справа, и когда изображение масштабируется, оно удаляет эти отступы, увеличивая ширину изображения. Как я могу сохранить отступы? Вы можете увидеть пример в середине страницы: https://lagaleramagazine.es

Пример 1 элемента:

      .pt-cv-1-col img {
          -moz-transition: all 0.7s;
          -webkit-transition: all 0.7s;
          transition: all 0.7s; 
    }
        
        
     .pt-cv-1-col:hover img {
          -moz-transform: rotate(10deg) scale(1.3);
          -webkit-transform: rotate(10deg) scale(1.3);
          transform: rotate(10deg) scale(1.3);
    }  
     <div id="event-56092" class="ect-list-post ect-featured-event  data-parent-post-id=" 56053""="">
    	<div class="ect-list-post-left ">
    		<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
    			<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
    				<div class="ect-list-date">
    					<div class="ect-date-area default-schedule">
    						<span class="ev-day">25</span>
    						<span class="ev-mo">febrero</span>
    						<span class="ev-yr">2019</span>
    					</div>
    				</div>
    			</a>
    		</div>
    	</div>
    	<div class="ect-list-post-right">
    		<div class="ect-list-post-right-table">
    			<div class="ect-list-description">
    				<h2 class="ect-list-title">
    					<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
    				</h2>
    				<button class="btn1 button-more svg">Más detalles</button>
    				<div class="p1" style="display: none;">
    					<div class="ect-event-content">
    						<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
    						<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" class="ect-events-read-more" rel="bookmark">Ir al evento »</a>
    					</div>
    				</div>
    			</div>
    			<div class="p1-venue">
    				<div class="ect-list-venue  default-venue">
    					<span class="ect-icon">
    						<i class="fa fa-map-marker" aria-hidden="true"></i>
    					</span>
    					<span class="ect-venue-details ect-address">
    						<a href="https://www.lagaleramagazine.es/lugar/area-de-atencion-al-mayor-ayuntamiento-de-badajoz/" title="Area de atención al Mayor , Ayuntamiento de Badajoz">Area de atención al Mayor , Ayuntamiento de Badajoz</a>,
    						<span class="tribe-address">
    							<span class="tribe-locality">Badajoz</span>
    							<span class="tribe-delimiter">,</span>
    							<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
    							<span class="tribe-country-name">España</span>
    						</span>
    					</span>
    					<span class="ect-google">
    						<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=qamp;amp;source=s_qamp;amp;hl=enamp;amp;geocode=amp;amp;q=Badajoz Badajoz España" title="Click para ver mapa de Google" target="_blank">  Google Map</a>
    					</span>
    					<div class="ect-rate-area">
    						<span class="ect-rate-icon">
    							<i class="fa fa-money" aria-hidden="true"></i>
    						</span>
    						<span class="ect-rate">Gratuito</span>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

Комментарии:

1. Я не вижу никакого div или изображения внутри класса (thumb-post ) в предоставленном вами коде?

2. Забудьте класс thumb-post, он из другого div, я удалил их из ответа, чтобы избежать ошибок.