Actualización porque no había entendido bien al OP
Para poder hacer zoom en la imagen en función de la opción elegida, también necesitarás Javascript para poder relacionar los elementos entre sí. En este caso, lo que haremos será asignarle a la imagen la class
equivalente al value
seleccionado.
He elegido una forma muy burda de hacer zoom en cada elemento, seguro que puedes perfeccionarlo. Pero lo que necesitas para poder trastearlo por CSS, que es crear una relación entre los dos elementos, ya te lo da este Javascript. ;)
let cocheSelec = document.getElementById('coche'); /* buscamos el select por ID */
function optionImg() {
let opcionActiva = cocheSelec.value,
/*extraemos el valor que esté seleccionado*/
cocheImg = document.querySelector('#coche-img img'); /* buscamos la imagen en cuestión*/
if (cocheImg.hasAttribute("class")) {
cocheImg.removeAttribute("class"); /*quitamos la clase anterior*/
}
cocheImg.setAttribute("class", opcionActiva); /* le añadimos la class con el value activo*/
}
document.addEventListener('DOMContentLoaded', optionImg, false); /*ejecutamos la función al cargar el DOM*/
cocheSelec.addEventListener('change', optionImg, false); /* y la volvemos a ejecutar cada vez que se cambie de opción*/
#coche-img {
position: relative;
width: 600px;
height: 350px;
margin: 0 auto;
overflow: hidden;
}
#coche-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s;
overflow: hidden;
transform-origin: 45% 75%;
}
#coche-img img.rueda,
#coche-img img.parrilla {
transform: scale(3);
}
#coche-img img.rueda {
top: -90px;
left: -170px;
}
#coche-img img.parrilla {
top: -0px;
left: 400px;
}
/*añade las demás clases y modifica su posición para mostrar lo que quieras*/
<!DOCTYPE html>
<html>
<body>
<h1>PARTES DEL COCHE</h1>
<form action="a.php">
<select name="coche" id="coche">
<option value=""></option>
<option value="rueda">Rueda</option>
<option value="parrilla">Parrilla</option>
<option value="espejo">Espejo</option>
<option value="puerta">Puerta</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<br>
<div id="coche-img">
<img src="https://cdn.motor1.com/images/mgl/AebbV/s1/audi-a3-sportback-45-tfsi-e-2021.jpg">
</div>
</body>
</html>
Método para hacer zoom en diversas imágenes en función de la clase (no es lo que pregunta el OP)
Como te comentaba, por la manera en que están anidados los elementos no se puede hacer con CSS puro, porque no se relacionan de manera directa en el DOM.
Para conseguir esa relación, se puede asignar a cada imagen una class
igual al value
de la opción con la que queremos relacionarla. Por ejemplo, añadir class="rueda"
a la imagen que corresponda a la opción con value="rueda"
.
Después, con un poco de Javascript añadimos class="activa"
a la imagen cuya clase coincida con el value
de la opción seleccionada. Y lo demás, ya sabes, con un poco de CSS, todo apañado.
De todas formas, tienes explicaciones detalladas en el fiddle, por si te da por aprender un poco de chino. ;)
let cocheSelec = document.getElementById('coche'); /* buscamos el select por ID */
function optionImg() {
let opcionActiva = cocheSelec.value, /*extraemos el value que esté seleccionado*/
imgActiva = document.querySelector('img.'+opcionActiva), /* buscamos el img cuya clase se llame igual que la opción seleccionada*/
restoImg = document.querySelectorAll('img:not(.'+opcionActiva+')');/* buscamos el resto de los img no seleccionados*/
imgActiva.classList.add('activa'); /* a la imagen con la clase seleccionada le añadimos la clase "activa"*/
restoImg.forEach(restImg => {
restImg.classList.remove('activa'); /*al resto de las imágenes les quitamos la clase "activa"*/
});
}
document.addEventListener('DOMContentLoaded', optionImg, false); /*ejecutamos la función al cargar el DOM*/
cocheSelec.addEventListener('change', optionImg, false); /* y la volvemos a ejecutar cada vez que se cambie de opción*/
img {
transition: transform 0.3s linear; /*una transición molonga nunca está de más :) */
}
img.activa {
transform: scale(1.1); /*cuando la imagen esté activa, hacer más grande)*/
}
<!DOCTYPE html>
<html>
<style>
img {
width: 40%
}
</style>
<body>
<h1>PARTES DEL COCHE</h1>
<form action="a.php">
<select name="coche" id="coche">
<option value="rueda">Rueda</option>
<option value="parrilla">Parrilla</option>
<option value="espejo">Espejo</option>
<option value="puerta">Puerta</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
<br>
<img class="rueda" src="https://cdn.motor1.com/images/mgl/AebbV/s1/audi-a3-sportback-45-tfsi-e-2021.jpg">
<img class="parrilla" src="https://cdn.motor1.com/images/mgl/AebbV/s1/audi-a3-sportback-45-tfsi-e-2021.jpg">
<img class="espejo" src="https://cdn.motor1.com/images/mgl/AebbV/s1/audi-a3-sportback-45-tfsi-e-2021.jpg">
<img class="puerta" src="https://cdn.motor1.com/images/mgl/AebbV/s1/audi-a3-sportback-45-tfsi-e-2021.jpg">
</body>
</html>
#coche.pieza:hover{//css }
y añadiendo al option una clase.css
actué sobre la imagen inferior.pieza
es un identificador o una clase de las opciones delselect
? Y porque usarhover
si no me interesa que se haga cuando paso el ratón por encima sino cuando selecciono una opción?