Problema al hacer un formulario con imagenes

Spanish Forum
#1

Veran, tengo la siguiente tabla:

    Schema::create('articulos', function (Blueprint $table){
        $table->increments('id');
        $table->string('titulo');
        $table->text('texto');
        $table->unsignedInteger('user_id'); // Foraneo a la tabla User.
        $table->foreign('user_id')->references('id')->on('users');
        $table->unsignedInteger('foto_id');
        $table->foreign('foto_id')->references('id')->on('fotos');
        $table->boolean('aprobado')->default(false);
        $table->timestamps();
    });

La variable foto_id apunta a la tabla Foto, que tiene estos valores:

Schema::create(‘fotos’, function(Blueprint $table){
$table->increments(‘id’);
$table->string(‘foto’);
$table->string(‘nombre’);
$table->date(‘fecha’);
$table->timestamps();
});

Para que interactuen las tablas, tengo esta función:

public function foto(){
    return $this->belongsTo(Foto::class);
}

Tengo el siguiente formulario para crear un nuevo articulo:

@extends(‘layouts.app’)
@section(‘content’)

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Publicar un nuevo articulo</div>

                <div class="card-body">
                    <form method="POST" action="crear_noticia" enctype="multipart/form-data">
                        @csrf

                        <input type="hidden" name="user_id" value="{{ auth()->user()->id }}"/>

                        <div class="form-group row">
                            <label for="foto_id" class="col-md-4 col-form-label text-md-right">Foto de Archivo</label>

                            <div class="col-md-6">
                                <div class="select-sim" id="select-color">
                                    <div class="options">
                                        @foreach($fotos as $fot)
                                            <div class="option">
                                              <input type="radio" name="foto_id" value="{{$fot->id}}" id="foto_id" checked />
                                                <label for="color-">
                                                    <img src="{{$fot->ruta()}}" style="width: 20px; height: 20px;" alt=""/> {{$fot->nombre}}
                                                 </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            @if ($errors->has('foto_id'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('foto_id') }}</strong>
                                </span>
                            @endif
                        </div>

                        <br><br>

                        <div class="form-group row">
                            <label for="titulo" class="col-md-4 col-form-label text-md-right">Título</label>

                            <div class="col-md-6">
                                <input id="titulo" type="text" class="form-control{{ $errors->has('titulo') ? ' is-invalid' : '' }}" name="titulo" value="{{ old('titulo') }}" required autofocus>

                                @if ($errors->has('titulo'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('titulo') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="texto" class="col-md-4 col-form-label text-md-right">Cuerpo de la noticia</label>

                            <div class="col-md-6">
                                <textarea id="texto" name="texto">{{old('texto')}}</textarea>

                                @if ($errors->has('texto'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('texto') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Subir Articulo
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

Ademas, utilizo en la vista un fichero llamado imagen.css:

.select-sim {
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
position:relative;
background:white;
border:1px solid #ccc;
overflow:hidden;
}

.select-sim::after {
content:“▼”;
font-size:0.5em;
font-family:arial;
position:absolute;
top:50%;
right:5px;
transform:translate(0, -50%);
}

.select-sim:hover::after {
content:"";
}

.select-sim:hover {
overflow:visible;
}

.select-sim:hover .options .option label {
display:inline-block;
}

.select-sim:hover .options {
background:white;
border:1px solid #ccc;
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:88px;
overflow-y:scroll;
}

.select-sim .options .option {
overflow:hidden;
}

.select-sim:hover .options .option {
height:22px;
overflow:hidden;
}

.select-sim .options .option img {
vertical-align:middle;
}

.select-sim .options .option label {
display:none;
}

.select-sim .options .option input {
width:0;
height:0;
overflow:hidden;
margin:0;
padding:0;
float:left;
display:inline-block;
position: absolute;
left: -10000px;
}

.select-sim .options .option input:checked + label {
display:block;
width:100%;
}

.select-sim:hover .options .option input + label {
display:block;
}

.select-sim:hover .options .option input:checked + label {
background:#fffff0;
}

Y este es el resultado:

uih
uih.png815×410 15.8 KB

Un formulario en el que para acceder a las fotos utilizo un sistema similar a la etiqueta <option>, pero que permite ver la imagen.
Pero hay un problema, ¡No consigo cambiar la imagen!
Veo la lista de imagenes, pero no se me permite cambiar a las otras fotos.
¿Que esta fallando?