Question

当我将鼠标悬停在其上时，如何在社交Feed中制作图像以进行缩放。

类似于this site左侧的Instagram Feed。

我在悬停css中尝试了这个：

<?xml  version="1.0" encoding="UTF-8"?>

    <context:property-placeholder location="classpath:application.properties" />

    <context:component-scan base-package="com.xxx.yyy.batch.kernel" />
    <context:component-scan base-package="com.xxx.yyy.batch.dao" />

    <context:annotation-config />

    <!-- Enable Annotation based Declarative Transaction Management -->
    <tx:annotation-driven proxy-target-class="true"
        transaction-manager="transactionManager" />

    <!-- Creating TransactionManager Bean, since JDBC we are creating of type 
        DataSourceTransactionManager -->
    <bean id="transactionManager"
        class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>

    <batch:job id="txnLogJob" job-repository="jobRepository"
        restartable="true">
        <batch:step id="txnload">
            <tasklet allow-start-if-complete="true">
                <chunk reader="txnLogItemReader" writer="txnLogItemWriter"
                    processor="txnLogProcessor" commit-interval="20" />             
            </tasklet>
        </batch:step>

        <batch:listeners>
            <batch:listener ref="completionListener" />
        </batch:listeners>
    </batch:job>

    <bean id="completionListener"
        class="com.xxx.yyy.batch.listeners.JobCompletionNotificationListener" />


    <bean id="jobParametersDAOImpl" class="com.xxx.yyy.batch.dao.JobParametersDAOImpl" />

    <bean id="batchLoader" class="com.xxx.yyy.batch.kernel.BatchLoader" />

    <bean id="batchjobParameter" class="com.xxx.yyy.batch.dao.Batch_Job_Parameters" />



    <bean id="txnLogItemWriter" class="org.springframework.batch.item.file.FlatFileItemWriter"
        scope="step">
        <property name="shouldDeleteIfExists" value="true" />
        <property name="resource" value="file:target/test-outputs/output.txt" />
        <property name="lineAggregator">
            <bean
                class="org.springframework.batch.item.file.transform.PassThroughLineAggregator" />
        </property>
    </bean>


    <bean id="txnLogProcessor"
        class="com.xxx.yyy.batch.processor.MessageContextItemProcessor" />

    <bean id="jobLauncher"
        class="org.springframework.batch.core.launch.support.SimpleJobLauncher">
        <property name="jobRepository" ref="jobRepository" />
    </bean>

    <bean id="jobRepository"
        class="org.springframework.batch.core.repository.support.JobRepositoryFactoryBean">
        <property name="databaseType" value="MYSQL" />
        <property name="dataSource" ref="dataSource" />
        <property name="transactionManager" ref="transactionManager" />
    </bean> 

    <bean id="dataSource" class="com.xxx.yyy.common.DataSource"
        destroy-method="close">
        <property name="driverClassName" value="${jdbc.driverClassName}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <property name="connectionProperties" value="${jdbc.connectionProperties}" />
        <property name="initialSize" value="${jdbc.initialSize}" />
        <property name="maxTotal" value="${jdbc.maxTotal}" />
        <property name="maxIdle" value="${jdbc.maxIdle}" />
        <property name="minIdle" value="${jdbc.minIdle}" />
        <property name="maxWaitMillis" value="${jdbc.maxWaitMillis}" />
        <property name="testOnBorrow" value="${jdbc.testOnBorrow}" />
        <property name="testWhileIdle" value="${jdbc.testWhileIdle}" />
        <property name="testOnReturn" value="${jdbc.testOnReturn}" />
        <property name="validationQuery" value="${jdbc.validationQuery}" />
    </bean>

</beans>

但我无法让它变焦。

Answer 1

你可以使用它。

＆＃13;

.item {
  position: relative;
  
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}

.item img {
  width: 500px;  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

＆＃13;

<div class="item">
  <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg" alt="pepsi" width="540" height="548">
  
  
</div>

＆＃13;

Answer 2

将此添加到：hover：

transform: scale(1.5);

悬停时缩放图像

2 个答案: